欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css實(shí)現(xiàn)左上角飄帶效果的完整代碼

  發(fā)布時(shí)間：2022-03-18 16:25:37   作者：萌萌噠小可愛啦   我要評論
這篇文章主要介紹了css實(shí)現(xiàn)左上角飄帶效果的完整代碼,代碼分為html和css兩部分組成，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

css實(shí)現(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);   /* 旋轉(zhuǎn)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;
}

到此這篇關(guān)于css實(shí)現(xiàn)左上角飄帶效果的完整代碼的文章就介紹到這了,更多相關(guān)css左上角飄帶內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論