Text-Align Text 45 Degrees

Options on display of text at 45 degree angle in browser

Surely the text in your VML example is changing size in size because you have fitpath="true" ? If you remove it then it respects the size you have set. You can then use the v-text-align:left style attribute to left align it if you need.

Vertically center rotated text with CSS

The key is to set position top and left to 50% and then transformX and transformY to -50%.

.inner {
position: absolute;
top: 50%;
left: 50%;
}

.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

see: http://jsfiddle.net/CCMyf/79/

Align text on slanted line

Using LESS

You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:

.loop(@i) when (@i > 0){
.loop((@i - 1));
.space@{i}{
width: floor(@i*@hSize/(1/tan(5deg)));
}
}
@hSize: 15px;
.space {
float: left;
clear: left;
width: @hSize;
height: @hSize;
}

HTML:

<p>
<span class="space space1"></span>
<span class="space space2"></span>
<!-- (...) -->
<span class="space space11"></span>
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>

Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110

@chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.

Displaying text at 45 degress in all browsers

You can use conditional comments to provide each MSIE its own stylecheet.
http://de.wikipedia.org/wiki/Conditional_Comments

<!--[if lte IE 8]> <style>...</style> <![endif]-->

<!--[if IE 9]> <style>...</style> <![endif]-->

Creating list angled at 45 degrees and aligned to bottom either with css or jquery

I ended up using a nice jquery function to incrementally add the margin left:

 var $addMargin = 0;
var $listItems = $('ul.routes li');
$listItems.each(function(){
$addMargin += 25;
$(this).css('margin-left', $addMargin + 'px');
});

How to create a square which is tilted 45 degrees and has a seperated border

I expect you to do something like this!

CSS:

.parent {        width: 150px;        height: 150px;           position: relative;        top: 40px;        left: 50px;        transform: rotate(45deg);       }    .parent:before {        content: "";        width: 106px;        height: 106px;        background: rgb(20, 20, 134);                    position: absolute;        transform: translate(-50%,-50%);        top: 50%;        left: 50%;    }    .orange {        width: 100%;        height: 20px;        background: orange;        position: absolute;    }    .orange::before,     .orange::after {        content: "";        position: absolute;        width: 20px;        height: 50px;        background: orange;               }    .orange::after {        right: 0;        height: 95px;                }    .orange:last-of-type {        bottom: 0;        transform: scale(-1);            }    .date {              position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%) rotate(-45deg);        color: #FFF;        line-height: 0;    }
<div class="parent">    <div class="orange"></div>            <div class="date">        <h4>May</h4>        <p>2018</p>    </div>     <div class="orange"></div></div>


Related Topics



Leave a reply



Submit