如何减少溢出分区css

我需要知道如何从蓝色框中剪下灰色部分。如何减少溢出分区css

上的图像波纹管秀我想从蓝色方块削减哪一部分的红色箭头。这是我的代码有：

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
} 
 

 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
} 
 
\t

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

来源

2016-08-08 Saif Obeidat

哪里是蓝色的盒子？ –

你在找这个？

.father { 
 
    height:400px; 
 
    width:400px; 
 
    margin:150px auto; 
 
    position:relative; 
 
    background:green; 
 
} 
 

 
.border { 
 
    position:relative; 
 
    bottom:50px; 
 
    margin:auto; 
 
    border-radius:50%; 
 
    width:96%; 
 
    height:30%; 
 
    background-color:#DDD; 
 
    z-index:-9; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

来源

2016-08-08 08:21:35

你能看到这种方法：

border-top-left-radius: 8px; 
border-top-right-radius: 8px;

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: lightblue; 
 
    border-top-left-radius: 8px; 
 
    border-top-right-radius: 8px; 
 
} 
 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

来源

2016-08-08 08:26:38 vijayP

据我了解，你想切断外的灰色部分蓝色的REA。如果是这样，这是你如何做到这一点。

.father { 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
.border { 
 
    position: relative; 
 
    bottom: 50px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #DDD; 
 
    z-index: 1; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

来源

2016-08-08 08:30:53 Ivan

OP的要求有点不清楚，但我认为这就是他们要找的。 –

.father 
 
{ 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 150px auto; 
 
    position: relative; 
 
    background: #04aada; 
 
    border-radius: 50px 50px 0 0; 
 
} 
 

 
.border 
 
{ 
 
    position: relative; 
 
    bottom: 25px; 
 
    margin: auto; 
 
    border-radius: 50%; 
 
    width: 96%; 
 
    height: 30%; 
 
    background-color: #fff; 
 
    z-index: 1; 
 
    box-shadow: 0px -4px 0px #04aada; 
 
}

<div class="father"> 
 
    <div class="border"></div> 
 
</div>

来源

2016-08-08 10:05:22

如何减少溢出分区css

回答

相关问题