css方法制作三角形

一、给div加border来实现

<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>