国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

畫三角形

Mr_houzi / 3308人閱讀

摘要：在商品展示中，畫三角形的出現的也挺多的，左上角的三角標簽，又或者對話形式的三角形，帶陰影效果等，在此記錄下直接添加三角形想你呦比較長的寫法簡單寫法使用偽類添加三角形附帶陰影效果添加兩個偽類一個偽類實現三角形，另一個用定位實

在商品展示中，畫三角形的出現的也挺多的，左上角的三角標簽，又或者對話形式的三角形，帶陰影效果等，在此記錄下
1、直接添加三角形 

    

        

        
想你呦
2、使用偽類添加三角形（附帶陰影效果）

添加兩個偽類：一個偽類實現三角形，另一個用定位實現陰影效果


  邀請越多的好友，中獎幾率越高哦！
  我知道了

.promptInfo{
  position: absolute;
  left: 5%;
  top: -28rpx;
  margin: 0 auto;
  padding: 20rpx 0;
  box-sizing: border-box;
  width: 88%;
  border-radius: 10rpx;
  z-index: 999;
  background: #fff;
  box-shadow: 3rpx 3rpx 3rpx rgba(0,0,0,.2);
  border: 0;
  font-size: 30rpx;
}
/* 添加與陰影顏色相同來形成三角形的陰影效果 */
.promptInfo::before{
  position: absolute;
  bottom: -21rpx;
  right: 110rpx;
  z-index: 999;
  border-top: 20rpx solid rgba(0,0,0,.2);
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  content: ""
}
.promptInfo::after{
  position: absolute;
  bottom: -17rpx;
  right: 110rpx;
  z-index: 999;
  border-top: 20rpx solid #fff;
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  content: ""
}
.promptInfo .inviteMessage{
  padding-left: 30rpx; 
}
.promptInfo .clickMessage {
  display: inline-block;
  margin-left: 15rpx;
  padding: 10rpx 20rpx;
  color: #fff;
  background: red;
  border-radius: 30rpx;
}
正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

前端面試之JavaScript（總結）

時間戳轉換成時間日期格式及去重

webpack打包（有面試題）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113749.html

相關文章

  • 如何用css畫三角形

    摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。 在設計稿中，經常會出現好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

    Yuqi 評論0 收藏0

  • 用CSS畫一個帶陰影的三角形的示例代碼

    摘要：思路怎么用畫一個帶陰影的三角形呢有童鞋說這還不簡單嗎網上有很多解決方案但其實大多都是實現不太完美的存在一些問題假設我們做一個向下的三角形箭頭常見的方法大致有兩種通過邊框控制和設為透明設為預定的顏色即可通過旋轉盒子方法一可以畫三角形但是1. 思路 怎么用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題 假設我們做一...

    chunquedong 評論0 收藏0

  • Canvas學習筆記（一）

    摘要：學習資源來自慕課網炫麗的倒計時效果繪圖與動畫基礎，非常感謝老師的課程分享創建標簽的標簽定義了一塊畫布，我們所有的繪圖都是基于這一塊畫布。正是因為是基于狀態的，所以不同的狀態應該有明確的起始標志。 喜歡前端，學習前端的最原始的動機，就是因為它可以制作非?？犰诺男Ч?。然而現在上班所用的技巧，多是在業務邏輯那一塊，并非是我最初想要去做的東西。所以在下班以后，打算重新拾起自己的興趣，去學習真正...

    codecraft 評論0 收藏0

  • 純CSS畫三角原理解析

    摘要：純畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設置成三角的樣式。 純CSS畫三角原理解析 因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后...

    lidashuang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<