[英]Diagonal Side div color css js
i have 2 div
like this 我有2
div
这样
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
CSS : CSS:
.container {
width:100%;
}
.one , .two {
width:50%;
display:inline-block;
}
I want to give this 2 divs a diagonal side color to be like this 我想给这个2 divs像这样的对角线侧面颜色
I tried rotate
but it gave me some white spot. 我尝试
rotate
但它给了我一些白点。
Can any one help me please ? 有人可以帮我吗?
A single gradient on the parent will do the visual: 父级上的单个渐变将产生视觉效果:
html { min-height:100%; background:linear-gradient(140deg, rgb(153, 180, 211)50%, rgb(217, 181, 150) 50%) }
example on HTML background sized at 100% viewport's height at the minimum.
Try using an svg path css background property. 尝试使用svg路径CSS背景属性。 See example below.
请参见下面的示例。
.container { background: red; height: 117px; } .one { float: left; width: 50%; height: 117px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' fill='blue' preserveAspectRatio='none'><path d='M0 0 L0 100 L50 100 L100 0 Z' /></svg>") no-repeat; } .two { float: left; width: 50%; height: 117px; }
<div class="container"> <div class="one"></div> <div class="two"></div> </div>
You can use clip paths and 2 div within a container, 您可以在容器中使用剪切路径和2 div,
https://codepen.io/anon/pen/OOXPmv https://codepen.io/anon/pen/OOXPmv
HTML 的HTML
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
CSS 的CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #ccc;
}
#wrapper {
width: 100%;
height: 100%;
background: #111;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 101%; /* If you make it 100%, you get a bit of black showing along the diagonal */
height: 100%;
background: #99b4d3;
-webkit-clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
}
#right {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #d9b596;
-webkit-clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.