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="" />