用三條垂直線（條紋）創建一個形狀

如何使用CSS創建如下圖所示的3條垂直線？用三條垂直線（條紋）創建一個形狀

來源

2016-01-07 Amir Amiri

您是否嘗試過創建這種形狀？ – ketan

我推薦使用SVG方式，在純CSS中可以變得太複雜，因此不切實際 –

這是很容易與linear-gradient背景圖像創建和我們不」 t需要多個div元素才能使用漸變創建此元素。我們需要的只是一對梯度圖像。

下面是的形狀是如何實現的一個解釋：

，其是85％，在X軸上的容器和75％的容器的Y大小的大小

一個線性梯度圖像軸用於創建大的白色部分，它位於容器的左側。
另一個線性漸變圖像是X軸容器大小的15％和Y軸容器大小的15％，用於在最後創建三個條紋。條紋是通過將漸變分成彩色和透明部分而創建的。彩色部分的大小相同，以產生條紋效果。

注：有問題的圖像中的第三條似乎比別人低一點，我假定這是圖像中的錯誤。如果不是，它仍然可以通過以下方法實現。

body { 
 
    background: yellow; 
 
} 
 
.shape { 
 
    height: 100px; 
 
    width: 400px; 
 
    transform: skew(-30deg); 
 
    transform-origin: left bottom; 
 
    background-image: linear-gradient(to left, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 33%, rgba(255,255,255,0.75) 33%, rgba(255,255,255,0.5) 60%, transparent 60%, transparent 66%, rgba(255,255,255,1) 66%, rgba(255,255,255,0.75) 93%, transparent 93%), linear-gradient(white, white); 
 
    background-size: 15% 100%, 85% 75%; 
 
    background-position: 100% 100%, 0% 0%; 
 
    background-repeat: no-repeat; 
 
}

<div class='shape'></div>

你也可以使用SVG path元素來創建這個形狀。

.shape { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 
.shape svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.shape svg path#white-bar { 
 
    fill: rgba(255, 255, 255, 1); 
 
} 
 
.shape svg path#translucent-bar-1 { 
 
    fill: rgba(255, 255, 255, 0.75); 
 
} 
 
.shape svg path#translucent-bar-2 { 
 
    fill: rgba(255, 255, 255, 0.5); 
 
} 
 
body { 
 
    background: yellow; 
 
}

<div class='shape'> 
 
    <svg viewBox='0 0 300 100'> 
 
    <path d='M0,75 25,0 240,0, 221.5,75z M245,0 220,100 235,100 260,0' id='white-bar' /> 
 
    <path d='M265,0 240,100 255,100 280,0' id='translucent-bar-1' /> 
 
    <path d='M285,0 260,100 275,100 300,0' id='translucent-bar-2' /> 
 
    </svg> 
 
</div>

^{注：這可能是這可能使用單個path元素和傾斜的漸變填充，但我不能與SVG好創建。}

來源

2016-01-07 06:59:46 Harry

好主意，非常感謝 –

我做了fiddle。

訣竅是您需要轉換該圖並使用vertical-align屬性。

-webkit-transform: skew(20deg); 
    vertical-align: text-top;

來源

2016-01-07 06:16:52 Siddharth

扭捏@ Siddarth的代碼，這可能是更適合於上面給出的圖像：

div{ 
 
    display:inline-block; 
 
    vertical-align: text-top; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
    background: white; 
 
} 
 

 
.one{ 
 
    width: 450px; 
 
    height: 100px; 
 
} 
 
div:not(.one){ 
 
    margin-left:0px; 
 
    width: 20px; 
 
    height: 200px; 
 
} 
 
.two{ 
 
    opacity:.8; 
 
} 
 
.three{ 
 
    opacity:.6; 
 
} 
 
.four{ 
 
    opacity:.4; 
 
} 
 
body { 
 
    background-color: rgb(255, 210, 2); 
 
    }

<body> 
 
<div class="one"> 
 

 
</div> 
 
<div class="two"> 
 

 
</div> 
 
<div class="three"> 
 

 
</div> 
 
<div class="four"> 
 

 
</div> 
 
    </body>

來源

2016-01-07 06:25:13

用三條垂直線（條紋）創建一個形狀

回答

相關問題