CSS属性transparent实现各种三角形示例

来源：动视网责编：小采时间：2020-11-27 18:53:06

CSS属性transparent实现各种三角形示例

CSS属性transparent实现各种三角形示例:效果图如下示例代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; pad

推荐度：

点击下载本文 文档为doc格式

导读CSS属性transparent实现各种三角形示例:效果图如下示例代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; pad

效果图如下

CSS属性transparent实现各种三角形示例

示例代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 .box{
 margin: 40px auto;
 width: 60px;
 background-color: #f0ac6b;
 }
 .t1{
 margin: 40px auto;
 width: 0px;
 height: 0px;
 /*background-color: #f0ac6b;*/
 border-bottom: 40px solid red;
 border-right: 20px solid transparent;
 border-left: 20px solid transparent;
 }
 .t2{
 margin: 40px auto;
 width: 0px;
 height: 0px;
 /*background-color: #f0ac6b;*/
 border-bottom: 40px solid transparent;
 border-right: 40px solid red;
 /*border-left: 20px solid transparent;*/
 }
 .t3{
 margin: 40px auto;
 width: 0;
 height: 0;
 border-top: 40px solid red;
 border-right: 20px solid transparent;
 border-left: 20px solid transparent;
 }
 .t4{
 margin: 40px auto;
 width: 0;
 height: 0;
 border-top: 40px solid transparent;
 border-left: 40px solid red;
 }
 .t5{
 margin: 40px auto;
 width: 0;
 height: 0;
 border-top: 40px solid red;
 border-right: 40px solid transparent;
 }
 .t6{
 margin: 40px auto;
 width: 0px;
 height: 0px;
 border-left: 40px solid transparent;
 border-bottom: 40px solid red;
 }
 .t7{
 margin: 40px auto;
 width: 0;
 height: 0;
 border-left: 40px solid red;
 border-bottom: 20px solid transparent;
 border-top: 20px solid transparent;
 }
 .t8{
 margin: 40px auto;
 width: 0;
 height: 0;
 border-right: 40px solid red;
 border-bottom: 20px solid transparent;
 border-top: 20px solid transparent;
 }
 </style>
</head>
<body>
<p class="box">
 <p class="t1"></p>
 <p class="t3"></p>
 <p class="t2"></p>
 <p class="t4"></p>
 <p class="t5"></p>
 <p class="t6"></p>
 <p class="t7"></p>
 <p class="t8"></p>
</p>

</body>
</html>

总结

CSS属性transparent实现各种三角形示例

CSS属性transparent实现各种三角形示例:效果图如下示例代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; pad

推荐度：

点击下载本文 文档为doc格式

标签：示例属性 css

热门焦点

CSS属性transparent实现各种三角形示例

CSS属性transparent实现各种三角形示例

CSS属性transparent实现各种三角形示例

最新推荐

猜你喜欢

热门推荐