css 收貨地址平行四邊形的線條樣式示例代碼
發(fā)布時(shí)間:2020-10-09 17:07:05 作者:長(zhǎ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-21
css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦)
這篇文章主要介紹了css實(shí)現(xiàn)0.5px線條解決移動(dòng)端兼容問題(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-23