CSS 制作三角形原理剖析

使用css制作三角形其实原理很简单，下面一步步解析。

1、html代码如下

 <div class="triangle">

 </div>

2、CSS代码

 .triangle{

     width: 200px;

     height: 200px;

     border: solid 40px red;

 }

不错，这里显示是一个正方形，如下

aaarticlea/png;base64,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" alt="" />

3、下面改变个边框颜色

 .triangle{

     width: 200px;

     height: 200px;

     border-bottom: solid 40px #0000FF;

     border-top: solid 40px #000000;

     border-right: solid 40px #FF0000;

     border-left: solid 40px #00FF00;

 }

显示效果如下

aaarticlea/png;base64,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" alt="" />

这里可能会感觉很奇怪，为什么四个角上的变成了斜的，下面在做一下变换

4、稍作变化，去掉上边框

 .triangle{

     width: 200px;

     height: 200px;

     border-bottom: solid 40px #0000FF;

     border-right: solid 40px #FF0000;

     border-left: solid 40px #00FF00;

 }

显示效果如下

aaarticlea/png;base64,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" alt="" />

可以看出，浏览器渲染时，针对边框角处理，以left和top为例说明：如果top 和left同时存在，各显示一部分；如果只有left,left边框才会显示为矩形角。

5、现在缩小div宽度和高度

 .triangle{

     width: 150px;

     height: 90px;

     border-bottom: solid 40px #0000FF;

     border-top: solid 40px #000000;

     border-right: solid 40px #FF0000;

     border-left: solid 40px #00FF00;

 }

显示效果如下

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAACyCAIAAADahX0MAAAFg0lEQVR4nO3VWZLbQAwEUd7UuNn4pvSX5RlZanFBd2HJjDqAGI0X2nYiet+m/gFEoUMI0SiEEI1CCNEohBCNQgjRKIQQjUII0SiEEI1CCNGojYge2fb8n7FtX+ofRRQj27b9hRCQED14vBYCEuqdPXi8FQIS6pp95zESAhLqlz3x+CAEJNQp+5/HZyEgoR7ZSx6HhICEqmfveBwVAhKqmw14nBACEqqYjXmcEwISqpV95HFaCEioSnaExxUhIKH82UEeF4WAhDJnx3lcFwISypmd4nFLCEgoW3aWx10hIKE82QUeDkJAQhmyazx8hICEYmeXebgJAQlFze7w8BQCEoqX3eThLAQkFCm7z8NfCEgoRubCY4oQkJA68+IxSwhISJc58pgoBCSkyHx5zBUCElqbufOYLgQktCqbwWOFEJDQ/GwSj0VCQEIzs3k81gkBCc3JpvJYKgQk5J3N5rFaCEjIL1vAQyAEJOSRreGhEQISupct4yETAhK6mq3koRQCEjqfLeYhFgISOpOt56EXAhI6lkl4hBACEvqUqXhEEQISep8JeQQSAhJ6lWl5xBICEvqZqe8xnhCQ0N9MfYlRhYCE4vAIKgQkvTP19WUQApKumfru8ggBSb9MfXHZhICkU6a+tZxCQNIjU19ZZiEgqZ6p7yu/EJDUzdSXVUUISCpm6puqJQQktTL1NVUUApIqmfqO6goBSf5MfUHVhYAkc6a+nR5CQJIzU19NJyEgyZap76WfEJDkydSX0lUISDJk6hvpLQQksTP1dSAEJHEz9V0gBCRxM/VFOKyUkB0kgTL1LfismpAdJCEy9RW4raCQHSTiTP3+nqspZAeJLFO/vPPKCtlBIsjUb+6/ykL258+j6enf3Hu1v09yJK3Tv7n3an+f5Ehap39z79X+PsmRtE7/5t6r/X2SI2md/s29V/v7JEfSOv2be6/290mOpHX6N/de7e+THEnr9G/uvdrfJzmS1unf3Hu1v09yJK3Tv7n3an+f5Ehap39z79X+PsmRtE7/5t6r/X2SI2md/s29V/v7JEfSOv2be6/290mOpHX6N/de7e+THEnr9G/uvdrfJzmS1unf3HuVv+/3L/UvaDfbvvQ/wndlhcBDtGpIagqBh3SlkBQUAo8Aq4OkmhB4hFkRJKWEwCPYKiCpIwQeIZceSREh8Ai83EgqCIFH+CVGkl4IPJIsK5LcQuCRaimRJBYCj4TLhySrEHikXTIkKYXAI/kyIcknBB4llgZJMiHwKLQcSDIJgUe5JUCSRgg8ii46khxC4FF6oZEkEAKPBouLJLoQeLRZUCShhcCj2SIiiSsEHi0XDklQIfBovFhIIgqBR/sFQhJOCDzYtm9xkMQSAg/2bSGQBBICD/bf9EiiCIEHezMxkhBC4MGGUyLRC4EHOzAZErEQeLDD0yBRCoEHOzkBEpkQeLBLW41EIwQe7MaWIhEIgQe7vXVIVguBB3PaIiRLhcCDuW4FknVC4MEmbDqSRULgwaZtLpIVQuDBJm8ikulC4MGWbBaSuULgwRZuCpKJQuDBls8fySwh8GCiOSOZIgQeTDpPJP5C4MECzA2JsxB4sDDzQeIpBB4s2ByQuAmBBwu5u0h8hMCDBd4tJA5C4MHC7zqSu0LgwZLsIpJbQuDBUu0KkutC4MES7jSSi0LgwdLuHJIrQuDBku8EktNC4MFK7CiSc0LgwQrtEJITQuDByu0zkqNC4MGK7gOSQ0LgwUpvhOSzEHiwBnuL5IMQeLA2e41kJAQerNleIHkrBB6s5Z6RvBYCD9Z4P5C8EAIP1n7/kDwLgQdj2749kDwLUf8sxuLMtq9nITsRvQ8hRKMQQjQKIUSjEEI0CiFEoxBCNAohRKMQQjQKIUSj/gCRa2rVa7eTFQAAAABJRU5ErkJggg==" alt="" />

可以理解，当宽度和高度同时变为0时，就是如下效果

 .triangle{

     width:;

     height:;

     border-bottom: solid 40px #0000FF;

     border-top: solid 40px #000000;

     border-right: solid 40px #FF0000;

     border-left: solid 40px #00FF00;

 }

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACSCAIAAAAhGQTZAAAEF0lEQVR4nO3TS26sQBBE0dqpc2ftnfYb5LPstqGhqPxFEqE7QIxQHjGeHOBG9gdwV0Y2yJENcmSD3BiPwVWejI1fawzKFZ6M8dxlo1zJyRfOPhvlik1+yLxlo1yZySvLERvlCkz+mJxgo1zqZAvkHBvlkiY7GqfZKBc+2aeYYaNc4OStwyQb5UImRwjzbJRznpwQuMRGObfJufNfZaOcw+T07RfYKGc6mTn8GhvljCaTV19mo9zyZP7kFmyUW5hcurcRG+UuTa4e246NcpOThUubslHu9GTtzNZslDsxWb6xAxvl3k4sDuzDRrmdidF13dgo92did1pPNsr9mJje1ZmNcmMMc7MIttvLicNFQ9huLCc+54xiu6WcuN0ykO1mcuJ5yFi228iJ8xXD2W4gJ/4nzGBrLSch90tiayonUcfLY2snJ4GXS2VrJCexZ8tmayEn4TcrwAYuJxkHq8EGKydJ1yrDBigneaeqxAYlJ6l3KsYGIifZR6rHVl5Oss9Tla2wnGQfpjZbSTnJPgkCWzE5yT4GDlsZOck+AxpbAblyZhhsqXIVzWDYkuSKmiGxhcvVNQNjC5QrbYbHFiJX3QySzVkOwAyVzU0OwwyYzUEOxgybzVQOyQyezUgOzKwD27IcnlkTtgU5SLM+bJfkUM1asU3KAZt1Yzsth23WkO15LAdvNlqyPd/JdTAbXdme23JNzEZjtudvuT5mozfb81uuldloz/Yc49HObNyB7fNDxiP9K4xrzvb5oU/d5DqzfZlpreTasr2aaX3kerJtmWlN5Bqy7ZtpHeS6sR2ZafByrdjOmWnYcn3YZsw0YLkmbPNmGqpcB7arZhqkHDzbmpmGJ4fNZmGmgckBs9mZaUhyqGzWZhqMHCSbj5mGIYfH5mmmAciBsfmbadXlkNiizLTScjBssWZaXTkMtgwzragcAFuemVZRrjpbtplWTq40Ww0zrZZcXbZKZlohuaJs9cy0KnIV2aqaaSXkyrHVNtPy5WqxIZhpyXKF2HDMtEy5KmxoZlqaXAk2TDMtRy6fDdlMS5BLZsM306LlMtm6mGmhcmlsvcy0OLkcto5mWpBcAltfMy1CLpqtu5nmLhfKdg8zzVcuju1OZpqjXBDb/cw0L7kItruaaS5y7mz3NtPs5XzZaPaVsZwjG81es5TzYqPZVmZyLmw0289Gzp6NZkcZyBmz0excq3KWbDSbaUnOjI1m812Xs2Gj2dUuyhmw0WytK3KrbDSzaFpuiY1mds3JXWejmXUTchfZaObTWbkrbDTz7JTcNBvN/DuWm2OjWVQHchNsNIvtndxZNppltCt3io1meW3LHbPRLLsNuQM2mtXot9w7NppV6kVul41m9fqW22ajWdX+y22w0ax2Mh4bbH9fcfX3D8QmPvwJA2dXAAAAAElFTkSuQmCC" alt="" />

6、这时候如果只留一个边框有颜色，其他边框变成透明的话，就成了三角形了

 .triangle{

     width:;

     height:;

     border-bottom: solid 40px transparent;

     border-top: solid 40px #000000;/*只留上边框有颜色，其他边框透明*/

     border-right: solid 40px transparent;

     border-left: solid 40px transparent;

 }

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAACYCAIAAABrtZy8AAAC80lEQVR4nO3cSW7DQAwFUd/UR/NRf3ZB4HjQ0AOrVXUCAQ+QtCB5i9G6zX4A251mvDTjpRkvzXhpxkszXrfH43Gzwt3v92ezJLKV7T9Yft+NshXsJVj+fs9kK9U7sDz9g8hWpA9gz2ayVegz2Asz2eb2Fey1mWyz2gL21ky28W0E+2Qm28i2g30xk21Mu8C+m8nWu71gm8xk69cBsK1msvXoGNgOM9nadhhsn5lsrToDtttMtvOdBDtiJtuZzoMdNJPtWE3AjpvJtrdWYKfMItvmGoLl/NyVbF9rC5Yms3Kyfag5WFrNN8r2sh5gaTiTKttTncDSdo5Ytt/6gaX57Ldst85g6TGvf3G23mDptGNxWbYBYOm3F3NBtjFg6brLdCm2YWDpvX92EbaRYBmwM7g822CwjNnzXJhtPFiG7eYuyTYFLCP3qRdjmwWWwTvwy7BNBMv4uwULsM0Fy5RbE2i26WCZdR8EylYBLBNvuuDYioBl7h0eEFsdsEy/nYRgKwWW6WYpz1YNLBXMUpitIFiKmKUkW02w1DFLMbayYCllljJslcFSzSwF2IqDpaBZprLVB0tNs0xiQ4ClrFmGs1HAUtksA9lAYCluliFsLLDUN0tnNhxYEGbpxkYEC8UsHdigYAGZpSkbFywsszRiQ4MFZ5bTbHSwEM1ygm0BsEDNcohtDbBwzbKTbRmwoM2ymW0lsNDNsoFtMbAsYJaPbOuBZQ2zvGFbEizLmOUf26pgWcksf9gWBstiZkkej8faYFnP7AppxkszXprx0oyXZrw046UZL814acZLM16a8dKMl2a8NOOlGS/NeGnGSzNemvHSjJdmvDTjpRkvzXhpxkszXprx0oyXZrw046UZL814acZLM16a8dKMl2a8NOOlGS/NeGnGSzNemvHSjJdmvDTjpRkvzXhpxkszXprx0oyXZrw046UZL814acZLM16a8dKMl2a8NOOlGS/NeGnGSzNemvHSjJdmvDTjpRkvzXhpxusHJ/YeC119Um4AAAAASUVORK5CYII=" alt="" />

CSS 制作三角形原理剖析的更多相关文章

CSS制作三角形和按钮
CSS制作三角形和按钮用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
css制作三角形，下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面首先利用css制作三角形 div { width:0px; height:0p ...
css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
css制作三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...
css 制作三角形图标不支持IE6
.triangle { width: 10px; height: 10px; overflow: hidden; border-left: 4px solid rgba(, , , ); border ...

随机推荐

laravel5.3----------调度任务以及Artisan
1.在使用的过程中会遇到有些函数不能用需要在php配置文件里面打开: disable_functions = exec,passthru,popen,proc_open,shell_exec,syst ...
Easy Tag Write(3.3)
package skyseraph.android.util; /** * @Title : Constant.java * @Package : tcl.nfc.tv.util * @ClassNa ...
Windows Phone 十四、磁贴通知
磁贴(Tile) Windows Phone 磁贴种类: 小尺寸 SmallLogo:71x71: Square71x71 中等 Logo:150x150: Square150x150 宽 WideL ...
IUS database
仿真中的database主要存放关于signal transition以及时间点的信息. IUS中的的database包括: 1) SHM, Verilog/VHDL/mixed-language的d ...
NIO SelectionKey中定义的4种事件
SelectionKey.OP_ACCEPT —— 接收连接继续事件,表示服务器监听到了客户连接,服务器可以接收这个连接了 SelectionKey.OP_CONNECT —— 连接就绪事件,表示客户 ...
web前端浮动、清浮动问题
浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充: 1.浮动,兼容性问题3px的问题,双边距的问题在平时工作的过程中,解决3px的问题,一般都是初始化*{margin:0;padding:0px ...
timus 1180. Stone Game 解题报告
1.题目: 1180. Stone Game Time limit: 1.0 secondMemory limit: 64 MB Two Nikifors play a funny game. The ...
[转] 经典SQL练习题
原题目来自qaz13177_58_CSDN博客 http://blog.csdn.net/qaz13177_58_/article/details/5575711/#sql 只是更新个人答案供参考表 ...
[T-SQL]INSERT INTO SELECT 与 SELECT INTO FROM
1.INSERT INTO SELECT 语法:INSERT INTO Table2(field1,field2,...) select value1,value2,... from Table1 要 ...
Lucene热词统计
1.建立搜索表 ID KeyWords DT 搜索一次保存一次,id才用guid提高效率 /// <summary> /// 搜索数据 /// </summary> /// & ...

CSS 制作三角形原理剖析

CSS 制作三角形原理剖析的更多相关文章

随机推荐

热门专题