(一)两个正方形重叠时,高度偏移量的实现原理
请参考:两个三角形重叠时,高度偏移量的实现原理 点击打开链接
(二)实心三角形(视觉上没有边框)
(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)效果图