如何用css實現直接畫出三角形以及對話形式的三角形（附代碼）

本篇文章給大家帶來的內容是關於如何用css實現直接畫出三角形以及對話形式的三角形（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

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

1、直接添加三角形

<div class="triangleContainer">    <div class="triangleContent">        <div class="triangle"></div>        <div class="title">想你呦</div>    </div></div><style>    body {        background: #e5e5e5;    }    .triangleContainer {        margin: 50px auto;        width: 500px;        height: 400px;        background: #fff;    }    .triangleContent {        position: relative;    }    .triangle {        position: absolute;        right: -70px;        top: -70px;        transform: rotate(45deg);        /* 比較長的寫法 */        /*border-top: 70px solid transparent;*/        /*border-bottom: 70px solid red;*/        /*border-left: 70px solid transparent;*/        /*border-right: 70px solid transparent;*/        /* 簡單寫法 */        border: 70px solid transparent;        border-bottom-color: red;    }    .title {        position: absolute;        right: 8px;        top: 17px;        transform: rotate(45deg);        font-size: 19px;        color: #fff;    }</style>

2、使用偽類添加三角形（附帶陰影製作效果）

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

<view class="promptInfo">  <text class="inviteMessage">邀請越多的好友，中獎幾率越高哦！</text>  <text class="clickMessage">我知道了</text></view>.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;}