Question

css3实现一个三角然后让他平铺

Answer 1

用css3的border可以实现三角形的绘制, 具体平铺, 就需要自己复制对应的html了, 平铺只有背景可以使用, 没办法平铺元素的, 下面是三角形的样式

.layoutRoot div{
    margin-bottom: 10px;
}
.triangle-up{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid #fa7000;
}
.triangle-down{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 60px solid #fa7000;
}
.triangle-left{
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 60px solid #fa7000;
}
.triangle-right{
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 60px solid #fa7000;
}

html:

<div class="layoutRoot">
    <div class="triangle-up"></div>
    <div class="triangle-down"></div>
    <div class="triangle-left"></div>
    <div class="triangle-right"></div>
</div>

Answer 2

<style type="text/css">
.dl{
 background:linear-gradient(45deg,#333 50%,transparent 0%) 0 0/30px 30px repeat;
 height:500px;
}
</style>

<div class="dl"></div>

Answer 3

用css3的border可以实现三角形的绘制, 具体平铺, 就需要自己复制对应的html了, 平铺只有背景可以使用, 没办法平铺元素的, 下面是三角形的样式
.layoutRoot div{ margin-bottom: 10px;}.triangle-up{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 60px solid #fa7000;}.triangle-down{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 60px solid #fa7000;}.triangle-left{ width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-right: 60px solid #fa7000;}.triangle-right{ width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid #fa7000;}
html:
<div class="layoutRoot"> <div class="triangle-up"></div> <div class="triangle-down"></div> <div class="triangle-left"></div> <div class="triangle-right"></div></div>

<div class=http://www.iqiyi.com/w_19rtmj4g8x.html?list=19rroeb816

jicemoon 15:12

两个DIV 然后border-radius 做两个直角三角形合在一起OK
有什么不懂的话也可以去51rgb的课堂看看，或者询问高手一些问题
希望对你有帮助

Answer 4

两个DIV 然后border-radius 做两个直角三角形合在一起OK