具有傾斜邊的形狀(響應(yīng))我正在嘗試創(chuàng)建一個形狀，如下圖中的只在一側(cè)傾斜邊緣(例如，底部)而其他邊則保持直線。我嘗試使用邊框方法(下面給出代碼)，但是形狀的尺寸是動態(tài)的，因此我不能使用這個方法。.shape { position: relative; height: 100px; width: 200px; background: tomato;}.shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent;}<div class="shape"> Some content</div>我也嘗試過對背景使用梯度(如下面的代碼)，但是隨著維度的變化，它會變得一團糟。在下面的片段中，你可以看到我在形狀上盤旋的意思。.gradient { display: inline-block; vertical-align: top; height: 200px; width: 100px; margin: 10px; color: beige; transition: all 1s; padding: 10px; background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;}.gradient:hover { width: 200px;}<div class="gradient"></div>我如何創(chuàng)建這個有傾斜邊的形狀也能支持動態(tài)尺寸?
2 回答
忽然笑
TA貢獻1806條經(jīng)驗 獲得超5個贊
height:10vw
div:aftertext-align
.dtrapz {
position: relative;
margin: 10px 40vw;
width: 0;
height: 10vw;
border: none;
border-right: 20vw solid #f22;
border-bottom: 5vw solid transparent;
}
.dtcont {
position: absolute;
width: 20vw;
height: 10vw;
text-align: center;
color: #fff;/* just aesthetic */
}
<div class="dtrapz">
<div class="dtcont">Some content</div>
</div>
添加回答
舉報
0/150
提交
取消