一宰翅、給div加border來實(shí)現(xiàn)
<div class="triangle"></div>
<style>
?.triangle{
? ?width: 0;
? ?height: 0;
? ?border-width: 40px;
? ?border-style: solid dashed dashed dashed;
? ?border-color: red transparent transparent transparent;
? }
</style>
二作谚、加 :after 偽類選擇器制作三角形
<div class="triangle"></div><style>
?.triangle{
? ? position: relative;
? ? width: 200px;
? ? height: 100px;
? ? background: blue;
? }
? .triangle::after{
? ? position: absolute;
? ? top: 100px;
? ? left: 30px;
? ? content: " ";
? ? display: block;
? ? width: 0;
? ? height: 0;
? ? border-width: 20px;
? ? border-color: blue transparent transparent transparent;
? ? border-style: solid dashed dashed dashed;
? ?}
? }
</style>
