Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make css box rotate from all sides

Tags:

html

css

I want to make a css box with rotation. here is the image that I'd like:

image

Can anyone help me to make the same? Here is the code that I have used.

.yr_highlights 
{
    background: none repeat scroll 0 0 #000000;
    height: 30px;
    margin: 24px auto 0;
    text-align: center;
    transform: skewY(-7.4deg);
    width: 20%;
}    
<div class="yr_highlights"></div>
like image 597
user930026 Avatar asked Apr 10 '26 02:04

user930026


1 Answers

See this Fiddle

.box {
    background: red;
    width: 200px;
    height: 50px;

    -webkit-transform: skewY(-7deg) skewX(-17deg);
    -moz-transform: skewY(-7deg) skewX(-17deg);
    transform: skewY(-7deg) skewX(-17deg);   

    margin: 50px 0 0 50px;
}
like image 157
Kilian Stinson Avatar answered Apr 12 '26 16:04

Kilian Stinson



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!