css三角形实现

先看一下效果图:
css三角形实现_第1张图片
css的每条边相交的地方,都是三角,将容器的宽高,设置为0,而边框非常粗,并且每条边颜色不同,就能得到图中第一个的效果:

    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: green blue red orange;
    top: 20px;
    left: 200px;
    border-style: dashed solid dashed dashed;

如果只设置一条边的颜色,其他边都设置为透明效果transparent,同时存在两个三角并将它们重叠,第二个相对于第一个偏移就能得到图中第二个的效果:

<div style="position: absolute;top: 20px;
   left: 300px">
   <div style=" width: 0;
   height: 0;
   position: absolute;
   border-width: 120px;
   border-color: transparent transparent red transparent;
   top: 20px;
   left: 200px;
   border-style: dashed solid dashed dashed;">div>
   <div style=" width: 0;
   height: 0;
   position: absolute;
   border-width: 120px;
   border-color: transparent transparent  orange transparent;
   top: 26px;
   left: 200px;
   border-style: dashed solid dashed dashed;">div>
div>

同理第三个的只要将第二个种的三角颜色改为背景色即可:

<div style="position: absolute;top: 20px;
    left: 600px">
    <div style=" width: 0;
    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: transparent transparent red transparent;
    top: 20px;
    left: 200px;
    border-style: dashed solid dashed dashed;">div>
    <div style=" width: 0;
    height: 0;
    position: absolute;
    border-width: 120px;
    border-color: transparent transparent  white transparent;
    top: 26px;
    left: 200px;
    border-style: dashed solid dashed dashed;">div>
div>

你可能感兴趣的:(编程语言)