普通三角形
效果图如下:
代码:
<div class="triangle"></div>
.triangle {
width: 0px;
height: 0px;
border-bottom: 100px solid #00a3af;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
带阴影的三角形(例如在气泡中使用时)
效果图如下:
代码:
<body>
<div class="bubble">我是气泡</div>
</body>
<style type="text/css">
.bubble {
text-align: center;
width: 200px;
height: 100px;
line-height: 100px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
position: relative;
}
.bubble::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -10px;
display: block;
width: 0px;
height: 0px;
border-top: 6px solid transparent;
border-left: 10px solid #ffffff;
border-bottom: 6px solid transparent;
}
.bubble::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -12px;
display: block;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-left: 12px solid rgba(131, 131, 131, 0.1);
border-bottom: 8px solid transparent;
}
</style>