HTML中写一个空心正方形,CSS3实现空心、实心三角指示箭头（利用正方形的旋转实现）...

(1)HTML结构

空心三角形(视觉上有边框)

(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)效果图