成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

畫三角形

Mr_houzi / 3319人閱讀

摘要：在商品展示中，畫三角形的出現(xiàn)的也挺多的，左上角的三角標(biāo)簽，又或者對(duì)話形式的三角形，帶陰影效果等，在此記錄下直接添加三角形想你呦比較長(zhǎng)的寫法簡(jiǎn)單寫法使用偽類添加三角形附帶陰影效果添加兩個(gè)偽類一個(gè)偽類實(shí)現(xiàn)三角形，另一個(gè)用定位實(shí)

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

    

        

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

添加兩個(gè)偽類：一個(gè)偽類實(shí)現(xiàn)三角形，另一個(gè)用定位實(shí)現(xiàn)陰影效果


  邀請(qǐng)?jiān)蕉嗟暮糜眩歇?jiǎng)幾率越高哦！
  我知道了

.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;
}
/* 添加與陰影顏色相同來(lái)形成三角形的陰影效果 */
.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;
}
正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

前端面試之JavaScript（總結(jié)）

時(shí)間戳轉(zhuǎn)換成時(shí)間日期格式及去重

webpack打包（有面試題）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113749.html

相關(guān)文章

  • 如何用css畫三角形

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

    Yuqi 評(píng)論0 收藏0

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

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

    chunquedong 評(píng)論0 收藏0

  • Canvas學(xué)習(xí)筆記（一）

    摘要：學(xué)習(xí)資源來(lái)自慕課網(wǎng)炫麗的倒計(jì)時(shí)效果繪圖與動(dòng)畫基礎(chǔ)，非常感謝老師的課程分享創(chuàng)建標(biāo)簽的標(biāo)簽定義了一塊畫布，我們所有的繪圖都是基于這一塊畫布。正是因?yàn)槭腔跔顟B(tài)的，所以不同的狀態(tài)應(yīng)該有明確的起始標(biāo)志。 喜歡前端，學(xué)習(xí)前端的最原始的動(dòng)機(jī)，就是因?yàn)樗梢灾谱鞣浅？犰诺男ЧＨ欢F(xiàn)在上班所用的技巧，多是在業(yè)務(wù)邏輯那一塊，并非是我最初想要去做的東西。所以在下班以后，打算重新拾起自己的興趣，去學(xué)習(xí)真正...

    codecraft 評(píng)論0 收藏0

  • 純CSS畫三角原理解析

    摘要：純畫三角原理解析因?yàn)橹白鲆粋€(gè)頁(yè)面出現(xiàn)了很多三角，開(kāi)始直接用圖片感覺(jué)并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺(jué)不知道具體原理是什么，很奇怪為什么邊框能設(shè)置成三角的樣式。 純CSS畫三角原理解析 因?yàn)橹白鲆粋€(gè)頁(yè)面出現(xiàn)了很多三角，開(kāi)始直接用圖片感覺(jué)并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后...

    lidashuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<