CSS3 实现三角形

通过CSS3实现的一些三角形、小箭头。

箭头朝右的三角形:

<style>
.trangle-right {
width: 0;
height: 0;
border: 30px solid transparent;
border-left-color: #f80;
}
</style>
<div class="trangle-right"></div>

箭头朝左的三角形:

<style>
.trangle-left {
width: 0;
height: 0;
border: 30px solid transparent;
border-right-color: #f80;
}
</style>
<div class="trangle-left"></div>

箭头朝上的三角形:

<style>
.trangle-top {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: #f80;
}
</style>
<div class="trangle-top"></div>

箭头朝下的三角形:

<style>
.trangle-down {
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #f80;
}
</style>
<div class="trangle-down"></div>

带小箭头的div框:

<style>
.box {
position: relative;
width: 150px;
height: 40px;
line-height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 8px;
}

.box:before {
position: absolute;
right: -12px;
top: 50%;
margin-top: -6px;
width: 0;
height: 0;
content: '';
border: 6px solid transparent;
border-left-color: #ccc;
}

.box:after {
position: absolute;
right: -11px;
top: 50%;
margin-top: -6px;
width: 0;
height: 0;
content: '';
border: 6px solid transparent;
border-left-color: #fff;
}
</style>
<div class="box">你好,在吗?</div>

在线预览