css 收貨地址平行四邊形的線條樣式示例代碼
發(fā)布時(shí)間：2020-10-09 17:07:05 作者：長(zhǎng)樂° 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
代碼如下所示：
// 收貨地址的平行四邊形的線條樣式
<view class="top"></view>
//樣式
.top{
background-color: #fff;
position: relative;
}
.top:before{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: repeating-linear-gradient(-45deg,#ff6c6c,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
background-size: 80px;
content: "";
}
ps：css實(shí)現(xiàn)收貨地址下邊的平行四邊形彩色線條
<div class="xiantiao"> <div class="city" style="margin-left:8px;"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city"></div> <div class="city" style="margin-right:0px;"></div> </div>
<style>
.xiantiao{width:100%; height:2px; overflow: hidden;}
.city {
width:36px;
height:2px;
margin-right: 23px;
background-color: #44a5fc;
color: #333;
transform: skew(-45deg);
float:left;
}
</style>
到此這篇關(guān)于css 收貨地址平行四邊形的線條樣式示例代碼的文章就介紹到這了,更多相關(guān)css邊框線條樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
純css實(shí)現(xiàn)流向性和動(dòng)態(tài)線條效果的代碼
這篇文章主要介紹了純css實(shí)現(xiàn)流向性和動(dòng)態(tài)線條效果的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或功能具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-03
css3 @keyframes規(guī)則繪制旋轉(zhuǎn)的花瓣和線條加載圖標(biāo)特效。非常不錯(cuò)，感興趣的朋友前來(lái)下載使用2019-05-07
一款線條狀的CSS3進(jìn)度條，這款進(jìn)度條有兩個(gè)特點(diǎn)是隨著進(jìn)度條的進(jìn)度更新2014-04-21css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦)
這篇文章主要介紹了css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-23
