Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > 利用div和css制作三角形效果_html/css_WEB-ITnose

利用div和css制作三角形效果_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:29:07
Original
1120 people have browsed it

利用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>
Copy after login

 

其实这个三角形是利用div的边框"挤出"来的，边框由于采用了不同的颜色，所以很好区分，如果只保留一个方位的三角形，可以自行设置边框颜色或者删除边框就可以了。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12680

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Related labels：
利用div和css制作三角形效果
source：php.cn
Previous article：根据屏幕大小，加载不同大小的图片_html/css_WEB-ITnose Next article：css如何实现未知宽高div中图片垂直水平居中效果_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2402
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2533
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2149
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
2027
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2104
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template