Question

我有以下设计：

要做到这一点，我使用下面的代码：

＆＃13;

html,body{
    height:100% !important
          ;padding:0 !important;margin:0 !important}
body{
    overflow-y:hidden;
    overflow-x:hidden;
}

#main{
    width:100%;
    float:right;
    text-align:right;
    height:100%;
    
}
#main>div
{
    display:inline-block;
    margin-bottom:-0px;
    float:right;
}

#triangleWrapper {
    width: 18%;
    height:100%;
   

}

.segmentTriangle {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: transparent linear-gradient(to left top, #e94d4d 50%, transparent 50%) repeat scroll 0% 0%;
}
.segmentTriangleleft
{
    width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: transparent linear-gradient(to right bottom, #f65c5b 50%, transparent 50%) repeat scroll 0% 0%;
}
.col-zozan
{
        width:20%;
    height: 100%;
    display:inline-block;
     min-height:100%;
    background: blue;
margin:0 auto;
    -webkit-transition: all 300ms ease-in;
    transform: skew(-25deg);
}
#red{
    background: red;
}
#lime{
    background:lime;
}

＆＃13;

        <div id="main">
            <div style="float: right;" id="triangleWrapper">
                <div style="height: 100%;" class="segmentTriangle"></div>
            </div>
            <div class="col-zozan" id="blue"></div>
            <div class="col-zozan" id="red"></div>
            <div class="col-zozan" id="lime"></div>
            <div style="float: left;" id="triangleWrapper">
                <div style="height: 100%;" class="segmentTriangleleft"></div>
            </div>
        </div>

＆＃13;

＆＃13; 但是我有两个问题，我左右两个空格，我怎么能用三角形颜色，

我怎么解决呢？我尝试使用背底颜色，但三角形左边和三角形不具有相同的颜色，我不会在体内使用背景颜色。

Answer 1

这是一个很好的问题，我已经对你的HTML进行了一些更改，并创建了这个想法。我的想法是设置角落：50％的屏幕。 col-zozan有20％。我认为HTML将是非常好的和语义的。它很好，因为可以负责任。如果您能理解，请参阅下面的代码。

＆＃13;

html,body{
    height:100%;
    padding:0;
    margin:0;
}

body{
    overflow:hidden;
}

#main{
    width:100%;
	height:100%;
	position: relative;
	padding-left:20%;
}

.col-zozan {
    width:20%;
    height: 100%;
	float: left;
    transform: skew(-25deg);
	z-index: 500;
	position:relative;
}

.corner{
	transform: none;
	position: absolute;
	width: 50%;
}

.left{
	left:0;
	background: #e94d4d;
}

.right{
	right:0;
	background: #f65c5b;
	z-index: 100;
}
.blue{
	background: blue;
}
.red{
    background: red;
}
.lime{
    background:lime;
}

＆＃13;

<div id="main">
	<div class="col-zozan corner left"></div>
	<div class="col-zozan blue"></div>
	<div class="col-zozan red"></div>
	<div class="col-zozan lime"></div>
	<div class="col-zozan corner right"></div>
</div>

＆＃13;

Answer 2

您是否考虑过使用线性渐变？

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #60ae71;
    background-image: -webkit-gradient(linear, -7.3% 13.7%, 107.3% 86.3%,color-stop(0, #17497e),color-stop(0.2, #17497e),color-stop(0.2, #20c2be),color-stop(0.4, #20c2be),color-stop(0.4, #fabb00),color-stop(0.6, #fabb00),color-stop(0.6, #91dc3a),color-stop(0.8, #91dc3a),color-stop(0.8, #20c2be),color-stop(1, #20c2be));
    /* Android 2.3 */
    background-image: -webkit-repeating-linear-gradient(330deg,#17497e 0%,#17497e 20%,#20c2be 20%,#20c2be 40%,#fabb00 40%,#fabb00 60%,#91dc3a 60%,#91dc3a 80%,#20c2be 80%,#20c2be 100%);
    /* IE10+ */
    background-image: repeating-linear-gradient(120deg,#17497e 0%,#17497e 20%,#20c2be 20%,#20c2be 40%,#fabb00 40%,#fabb00 60%,#91dc3a 60%,#91dc3a 80%,#20c2be 80%,#20c2be 100%);
    background-image: -ms-repeating-linear-gradient(330deg,#17497e 0%,#17497e 20%,#20c2be 20%,#20c2be 40%,#fabb00 40%,#fabb00 60%,#91dc3a 60%,#91dc3a 80%,#20c2be 80%,#20c2be 100%);
}

＆＃13;

Here is a fantastic tool for creating complex gradients

如何使用gradiant填充元素之间的填充间隙

2 个答案: