Heim > Artikel > Web-Frontend > 利用div和css制作三角形效果_html/css_WEB-ITnose
利用div和css制作三角形效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:29:071049Durchsuche
利用div和css制作三角形效果:
本章节介绍一下如何利用div和css实现三角形效果，虽然看起来表神奇，但是原理是非常的简单。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{ width:0px; height:0px; border:40px solid white; border-top-color:#930; border-bottom-color:#0C3; border-left-color:#FC0; border-right-color:#009; line-height:0px;}</style></head><body><div id="box"></div></body></html>
其实这个三角形是利用div的边框"挤出"来的，边框由于采用了不同的颜色，所以很好区分，如果只保留一个方位的三角形，可以自行设置边框颜色或者删除边框就可以了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12680
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：根据屏幕大小，加载不同大小的图片_html/css_WEB-ITnoseNächster Artikel：css如何实现未知宽高div中图片垂直水平居中效果_html/css_WEB-ITnose