css 收貨地址平行四邊形的線條樣式示例代碼
發(fā)布時間：2020-10-09 17:07:05 作者：長樂° 
我要評論
我要評論這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
代碼如下所示：
// 收貨地址的平行四邊形的線條樣式
<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實現(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
純css實現(xiàn)流向性和動態(tài)線條效果的代碼
這篇文章主要介紹了純css實現(xiàn)流向性和動態(tài)線條效果的代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或功能具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-03
css3 @keyframes規(guī)則繪制旋轉(zhuǎn)的花瓣和線條加載圖標特效。非常不錯，感興趣的朋友前來下載使用2019-05-07
一款線條狀的CSS3進度條，這款進度條有兩個特點是隨著進度條的進度更新2014-04-21css實現(xiàn)0.5px線條解決移動端兼容問題(推薦)
這篇文章主要介紹了css實現(xiàn)0.5px線條解決移動端兼容問題(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-23
