CSS3实现空心、实心三角指示箭头（利用正方形的旋转实现）

（1）HTML结构

<div class="dialog-rotate-noBorder">实心三角形（视觉上没有边框）</div>
（2）CSS样式

.dialog-rotate-noBorder {
width: 300px;
height: 150px;
background: orchid;
margin: 50px auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
border: 10px solid orchid; }

.dialog-rotate-noBorder::before {
content: '';
position: absolute;
top: 145px;
left: 120px;
width: 30px;
height: 30px;
background: orchid;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
（3）效果图

 

（三）空心三角形（视觉上有边框）
（1）HTML结构

<div class="dialog-rotate-border">空心三角形（视觉上有边框）</div>
（2）CSS样式

.dialog-rotate-border {
width: 300px;
height: 150px;
background: orchid;
margin: 50px auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
border: 10px solid red; }

.dialog-rotate-border::before {
content: '';
position: absolute;
top: 145px;
left: 120px;
width: 30px;
height: 30px;
background: red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }

.dialog-rotate-border::after {
content: '';
position: absolute;
top: 131px;
left: 120px;
width: 30px;
height: 30px;
background: orchid;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
（3）效果图

---------------------
作者：转身后_从未想过离开你
来源：CSDN
原文：https://blog.csdn.net/qq_38658877/article/details/78115038?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！