css實現(xiàn)左上角飄帶效果的完整代碼
發(fā)布時間：2022-03-18 16:25:37 作者：萌萌噠小可愛啦 
我要評論
我要評論這篇文章主要介紹了css實現(xiàn)左上角飄帶效果的完整代碼,代碼分為html和css兩部分組成，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
css實現(xiàn)左上角飄帶效果效果如下：
html代碼
<div class='wrap'>
<div class='ribbon'>
<span>測試1</span>
</div>
</div>
css代碼
.wrap {
/* 最外層的div容器 */
min-width: 200px;
min-height: 200px;
text-align: center;
position: relative; /* 父元素相對定位 */
overflow: hidden;
border: 1px solid #F3F3F3; /* 邊框 */
background-color: #3EA1FF36; /* 背景顏色 */
}
.ribbon {
/* 左上角飄帶 */
background-color: #1890FF; /* 左上角飄帶的背景顏色 */
overflow: hidden;
white-space: nowrap; /* 文字不換行*/
position: absolute; /* 絕對定位 */
left: -40px;
top: 10px;
transform: rotate(-45deg); /* 旋轉45°*/
box-shadow: 0 0 10px #888; /* 飄帶的陰影*/
}
.ribbon span {
border: 1px solid #1890FF;
color: #fff;
display: block;
font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 5px 50px;
text-align: center;
text-shadow: 0 0 5px #444;
}
到此這篇關于css實現(xiàn)左上角飄帶效果的完整代碼的文章就介紹到這了,更多相關css左上角飄帶內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
本文通過實例代碼給大家介紹了css右上角飄帶效果，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-03-18
