Div içinde css3 kullanarak özel şekiller nasıl oluşturulur?

Question

Tuval kullanmadan CSS3 kullanarak aşağıdaki şekle ulaşmaya çalışıyorum, herkes aşağıdaki bu şekle ulaşmamda bana yardımcı olabilir mi?

Answer 1

ilgili daha fazla bilgi için transform:skew() CSS özelliğini İşte

kullanabilirsiniz açı efekti almak için bir kod örneği

.rect { 
 
    width:100px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
.skew { 
 
    width: 100px; 
 
    height: 50px; 
 
    background:#33FF99; 
 
    transform:skew(0deg,-27deg); 
 
} 
 

 
.r1, .r2, .s1{ 
 
    position:absolute; 
 
} 
 

 
.r1{ 
 
    top:60px; 
 
    left:0; 
 
} 
 

 
.r2 { 
 
    top:10px; 
 
    left:200px; 
 
} 
 

 
.s1{ 
 
    top:35px; 
 
    left:100px; 
 
}

<div class="rect r1"></div> 
 
<div class="skew s1"></div> 
 
<div class="rect r2"></div>

Answer 2

Sen skewY ile CSS 2D transforms kullanabilirsiniz: Eğer desteklemeniz gereken tarayıcılarda göre satıcı eklerler gerekir

div{ 
 
    position:relative; 
 
    width:200px; height:50px; 
 
    background:green; 
 
    margin:0 100px; 
 
    transform-origin:100% 0; 
 
    transform:skewY(-30deg); 
 
} 
 
div:before, div:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    width:50%; height:100%; 
 
    transform:skewY(30deg); 
 
    background:red; 
 
} 
 
div:before{ 
 
    right:100%; 
 
    transform-origin:100% 0; 
 
} 
 
div:after{ 
 
    left:100%; 
 
    transform-origin:0 0; 
 
}

<div></div>

Not. canIuse

Answer 3

transform: skewY(Ndeg), daha sonra her iki kenar boşlukları veya transform: translateY(Npx) divları dikey olarak hareket ettirmek için. Çalışma örneği:

.red, 
 
.green { 
 
    width: 100px; 
 
    height: 50px; 
 
    float: left; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 50px; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.green { 
 
    background: lime; 
 
} 
 

 
.first { 
 
    /*margin-top:56px;*/ 
 
    transform: translateY(56px) 
 
} 
 

 
.second { 
 
    transform: skewY(150deg) translateY(28px); 
 
    /*transform: skewY(150deg); 
 
    margin-top:28px;*/ 
 
} 
 

 
.second span { 
 
    transform: skewY(30deg); 
 
    display: inline-block; 
 
} 
 

 
.third {}

<div id="container"> 
 
    <div class="red first"><span>div</span></div> 
 
    <div class="green second"><span>div</span></div> 
 
    <div class="red third"><span>div</span></div> 
 
</div>