Rumah  >  Artikel  >  hujung hadapan web  >  CSS和CSS3实现画出三角形元素

CSS和CSS3实现画出三角形元素

不言
不言asal
2018-05-09 11:31:081965semak imbas

这篇文章主要介绍了关于CSS和CSS3实现画出三角形元素,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

前端页面偶尔需要有三角形图标或者三角形样式,现在图标的三角形大多用字体图标去实现了,但是有些大的三角形模块还是需要前端运用CSS样式去画出来的,下面介绍各种角度的三角形css样式代码,希望能对大家带来帮助

1:triangle-up

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2:triangle-down

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

3:triangle-left 

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

4:triangle-right 

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

5::triangle-topleft

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

6:triangle-topright

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

7:triangle-bottomleft

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

8:triangle-bottomright :

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

以上就是本篇文章的全部内容了,更多相关内容请关注PHP中文网。

相关推荐:

CSS3实现倾斜和旋转动画效果





Atas ialah kandungan terperinci CSS和CSS3实现画出三角形元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:css3实现求婚小动画Artikel seterusnya:CSS布局自适应高度终极方法