具有弯曲边的矩形 [英] Rectangle with curved sides

问题描述

如何通过简单的DIV与css实现这一点？

HTML：

 code>< div class =curv> 
< div class =holder>< / div> 
< / div> 
  

CSS：

 code> .curv {
 width：800px; 
 margin：0 auto; 
 position：relative; 
 padding-top：100px; 
 overflow：hidden; 
} 
 .curv：before {
 background：＃333; 
 width：100％; 
 height：200px; 
 left：0px; 
 right：0px; 
 top：0px; 
 content：''; 
 position：absolute; 
 edge-radius：100％100％0 0; 
} 
 .holder {
 width：100％; 
 height：200px; 
 background：＃333; 
 position：relative; 
 z-index：9999; 
} 
  

我现在得到的是：

解决方案

请检查更新的代码

  .curv {width：800px; margin：0 auto;位置：相对; padding-top：100px; overflow：hidden;}。curv：before {background：＃333; height：200px; left：-20px; right：-20px; top：10px; content：''; position：absolute; border-radius：100％100％0 0;}。holder {height：200px;背景：＃333;位置：相对; z-index：9999;}  

 < div class = curv> < div class =holder>< / div>< / div>  

How can I achieve this by simple DIV with css?

HTML:

<div class="curv">
    <div class="holder"></div>
</div>

CSS:

.curv{
    width: 800px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}
.curv:before{
    background: #333;
    width: 100%;
    height: 200px;
    left: 0px;
    right: 0px;
    top: 0px;
    content: '';
    position: absolute;
    border-radius: 100% 100% 0 0;
}
.holder{
    width: 100%;
    height: 200px;
    background: #333;
    position: relative;
    z-index: 9999;
}

What I am getting now is: https://jsfiddle.net/debraj/fnL3wzrn/

I want to look the corners to be sharp edges and not smooth. So it will look like this:

解决方案

Please check updated code

.curv{
    width: 800px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}
.curv:before{
    background: #333;
    height: 200px;
    left: -20px;
    right: -20px;
    top: 10px;
    content: '';
    position: absolute;
    border-radius: 100% 100% 0 0;
}
.holder{
     height: 200px;
    background: #333;
    position: relative;
    z-index: 9999;
}

<div class="curv">
    <div class="holder"></div>
</div>

这篇关于具有弯曲边的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！