這篇文章給大家分享的是有關用css實現直接畫出三角形以及對話形式三角形的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

公司專注于為企業(yè)提供成都做網站、網站設計、微信公眾號開發(fā)、電子商務商城網站建設，小程序定制開發(fā)，軟件按需求定制網站等一站式互聯網企業(yè)服務。憑借多年豐富的經驗，我們會仔細了解各客戶的需求而做出多方面的分析、設計、整合，為客戶設計出具風格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯公司更提供一系列網站制作和網站推廣的服務。

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

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;
}

感謝各位的閱讀！關于用css實現直接畫出三角形以及對話形式三角形的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！