我想做这个形状: 应该有这样的3个div形状。我已经建立了一些形状,但我想看看这个形状如何适合我的网站
我已经建立了这个: codepan
我所做的例子:
.mainOuterDiv{
height:300px;
overflow:hidden;
background:#FFF;
}
.middDiv{
width:70%;
height:75px;
background-color: #0CF;
margin:0px auto;
position:relative;
margin-top:50%;
}
.innerLeft{
position: absolute;
left: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,215deg);
background-color: #0CF;
}
.innerRight{
position: absolute;
right: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,145deg);
background-color: #0CF;
}
.textDiv{
z-index:9999;
width:100%;
height:100%;
position:absolute;
background-color: #0CF;
}
有没有办法在css中制作这个?
答案 0 :(得分:1)
有一些例子:
.container
{
position:relative;
width:400px; height:302px;
overflow:hidden;
}
.mainDiv
{
height:300px; width:300px;
background-color:white;
border:solid 1px black;
position:absolute;
left:0;right:0;margin:auto;
}
.middDiv
{
height:55px; width:70%;
background-color:lightblue;
position:absolute;
bottom:0;left:0;right:0;
margin:auto;
z-index:10;
}
.leftDiv, .rightDiv
{
position:absolute;
bottom:26px;
width:30%;height:48px;
background-color:blue;
z-index:10;
}
.leftDiv
{
left:-13%;
transform:rotate(30deg) skew(30deg);
}
.rightDiv
{
right:-13%;
transform:rotate(-30deg) skew(-30deg);
}
.leftBDiv, .rightBDiv
{
position:absolute;
width:13%; height:47px;
bottom:59px;
background-color:black;
z-index:9;
}
.leftBDiv
{
left:-12%;
transform:rotate(-30deg) skew(-30deg);
}
.rightBDiv
{
right:-12%;
transform:rotate(30deg) skew(30deg);
}

<div class="container">
<div class="mainDiv">
<div class="middDiv"></div>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="leftBDiv"></div>
<div class="rightBDiv"></div>
</div>
</div>
&#13;
我为中间,左侧和右侧块使用不同的颜色,因此您可以看到它。
如果您为divs
人使用边框,则必须为所有人更改positions
:left
,right
和bottom
。
也有 fiddle 示例。
答案 1 :(得分:1)
以下是skewY
使用:pseudo
元素
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.content {
background: white;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
}
.shadow {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: 18%;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: -1;
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
bottom: -28%;
border: 1px solid black;
}
.shadow:before {
left: -30%;
transform: skewY(-23deg);
}
.shadow:after {
right: -30%;
transform: skewY(23deg);
}
.ribbon {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: -1px;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: 1;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
top: -28%;
border: 1px solid black;
}
.ribbon:before {
left: -30%;
transform: skewY(23deg);
}
.ribbon:after {
right: -30%;
transform: skewY(-23deg);
}
hr {
margin: 20px;
0
}
<div class="container">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
<hr>
<div class="container" style="width:200px; height:200px;">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>