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