Menu
When I make a css triangle it's all good, but when I rotate it a strange line appears in the middle. Why is this?
Here's a fiddle.
div {
position:absolute;
top:100px;
width:0;
height:0;
border:100px solid rgba(0,0,0,0);
border-top-color:#333;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
565
Rotating images in real-time with the rotate parameter To rotate the image by 180 degrees, we need to add rt-180 transformation parameter to the URL, as shown below. The resulting image is the same as passing 180deg to the rotate function in CSS.
An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale and others to perform various kinds of transformation to elements. The rotate() transformation function can be used as the value to rotate the element.
rotate() The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.
its bug - https://bugzilla.mozilla.org/show_bug.cgi?id=818109
add translate3d( 0, 0, 1px)
div {
position:absolute;
top: 100px;
width: 0;
height: 0;
border: 100px solid rgba(0,0,0,0);
border-top-color: #333;
-webkit-transform: rotate(45deg) translate3d( 0, 0, 1px);
-moz-transform: rotate(45deg) translate3d( 0, 0, 1px);
transform: rotate(45deg) translate3d( 0, 0, 1px);
}<div></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
