底边奇怪的圆形矩形

Question

我一直在阅读有关如何制作底部圆角的矩形的信息。我发现我可以做一个矩形的圆边，而不是圆角。

.figure {
  height: 400px;
  width: 200px;
  background-color: black;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px;
}

<div class="figure"></div>

但是我不能让它看起来像这个图像。

如果你们能帮助我，我真的很感激。谢谢！

Answer 1

试一试：https://jsfiddle.net/stevenng/c6jxzL2m/2/

<div class="figure"></div>

.figure {
  position: relative;
  width: 100%;
  height: 90px;
}
.figure:before {
  background-color: purple;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px; 
}
.figure:after {
  content: "";
  position: absolute;
  bottom:0;
  left: 50%;
  width: 60px;
  height: 30px;
  margin-left: -50px;
  border-top: 31px solid purple;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px; 
    height: 0;
}

Answer 2

一般来说，目前的想法不是为此使用 CSS，而是使用 SVG。

然而，也可以将边倒圆，但效果可能不是您想要的。

.figure {
  height: 100px;
  width: 300px;
  margin: auto;
  background-color: black;
  border-radius: 0 0 20px 20px / 0 0 100% 100%;
}

<div class="figure"></div>

Answer 3

body{margin:0; font:16px/1 sans-serif;}
.figure{
  position:      relative;
  background:    #4C3966;
  height:        40px;
  border-radius: 0 0 100% 100%;
}
.figure a{
  color:      #fff;
  background: inherit;
  position:   absolute;
  bottom:     0;
  left:       50%;
          transform: translate(-50%, 95%);
  -webkit-transform: translate(-50%, 95%);
  padding:    8px 11px;
  border-radius: 0 0 7px 7px;
}
.figure a:before,
.figure a:after{
  content:  " ";
  position: absolute;
  top:      0;
  width:    23px;
  height:   100%;
  background-color: inherit; 
}
.figure a:before{
  border-radius: 0 0 0 12px;
  transform:     skew(24deg);
  left:          -13px;
}
.figure a:after{
  border-radius: 0 0 12px 0 ;
  transform:     skew(-24deg);
  right:         -13px;
}

<div class="figure">
  <a>DESTINOS</a>
</div>

主要来自：

Answer 4

这是我尝试过的示例。它并不完美，但我认为它几乎看起来像。

CSS

body { margin: 0; padding: 0; overflow-x: hidden; }
.full {
  width: 100%;
  height: 40px;
  background: purple; 
  position: relative; 
}

.full:before { content: ""; position: absolute; left: 0; right: 50%; margin-left: -150px; background: purple; bottom: -30px; height: 50px; border-bottom-left-radius: 50%30px; border-bottom-right-radius:50%30px;   transform: rotate(2deg); -webkit-transform: rotate(2deg); }
.full:after { content: ""; position: absolute; right: 0; left: 50%; margin-right: -150px; background: purple; bottom: -30px; height: 50px; border-bottom-left-radius: 50%30px; border-bottom-right-radius:50%30px;   transform: rotate(-2deg); -webkit-transform: rotate(-2deg); }

.figure {
    height: 50px;
    width: 100px;
    margin: auto; 
    background-color: purple;
    border-bottom-left-radius: 250%30px;
    border-bottom-right-radius: 250%30px;
    position : relative; 
    transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    margin-top:27px;
    text-align: center;
    line-height: 45px;
    color: #fff; text-transform: uppercase; font-family: arial; z-index: 10;
}

.figure:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(50deg);
  background: purple;
  position: absolute;
  left: 2px; bottom: 0; top: -95px;
  content: "";
  width:65px;border-bottom-left-radius: 100%10px; border-bottom-right-radius:100%10px; z-index: -1
}

.figure:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-50deg);
  background: purple;
  position: absolute;
  right: 2px; bottom: 0; top: -105px;
  content: "";
  width:70px;border-bottom-left-radius: 100%10px; border-bottom-right-radius:100%10px;  z-index: -1
}

See it here

Answer 5

为了好玩，因为 mix-blend-mode 并非随处可用：

div {
  background: #4F3D6D;
  border: solid;
  mix-blend-mode: screen;
  color: white;
  padding: 1em;
  position: relative;
  margin-bottom: 3em;
  border-radius: 0 0 100% 100% /2em;
}
div h1 {
  border: solid;
  position: absolute;
  top: 99.5%;
  background: inherit;
  margin: 0;
  padding: 0 2em 0.5em;
  left: 0;
  right: 0;
  margin: auto;
  display: table;
  /* shrinks on content */
  border-radius: 0 0 180px 180px /0 0 200px 200px;
}
div h1:before,
div h1:after {
  content: '';
  padding: 0.5em;
  display: block;
  width: 70%;
  margin: -3px -2.1em -0.25em;
  background: inherit;
  border-left: solid;
  transform: skew(22deg)
}
div h1:after {
  position: absolute;
  top: 0;
  left: 30%;
  transform: skew(-22deg);
  margin: 0 0 0 -1.06em;
  border-left: none;
  border-right: solid;
}
html {
  background: url(http://lorempixel.com/500/800/abstract/1) top center;
}

<div>
  <h1>Destiny</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

</div>

Pen to play with

Answer 6

SVG:

形状是在 Adobe Illustrator 上重建的（免费替代品：Inkscape）并得到改进，因为它不像您看到的那样对称下图中粉红色线条与原图对比：

SVG 生成更多代码行，但允许您构建独特且详细的形状（在这种情况下值得，因为它是一个对页面布局非常重要的大元素）。

body {
  margin: 0px;
  font-size: 1.4vw;
  font-family: arial, sans-serif;
  color: white;
  background: #f4f4f4;
}

#header {
  position: relative;
  height: auto;
  width: 100%;
  text-align: center;
}

svg {
  max-width: 100%;
}

path {
  fill: #4f3b6a; 
}

span {
  color: white;
  position: absolute;
  left:0;
  right:0;
  margin: auto;
  bottom: 16%;
}

<div id=header>

<svg x="0px" y="0px" viewBox="0 0 1920 180">
<path d="M0,0c0,0,0.085,57.702,0.085,77.429c42.108,3.792,84.187,7.988,126.333,11.294c100.844,7.912,201.861,12.082,302.976,14.923
 c132.122,3.715,258.477,4.525,390.619,2.69c3.054-0.043,4.721,1.115,6.438,3.565c10.835,15.457,22.122,30.6,32.771,46.182
 c11.62,17,26.813,23.914,47.781,23.914c2.441,0,102.813,0,105.994,0c20.968,0,36.161-6.914,47.781-23.914
 c10.647-15.582,21.937-30.725,32.771-46.182c1.719-2.451,3.386-3.609,6.438-3.566c132.145,1.835,258.497,1.021,390.618-2.689
 c101.113-2.842,202.133-7.013,302.977-14.923c42.146-3.307,84.225-7.503,126.333-11.294C1919.915,57.702,1920,0,1920,0H0z"/>
</svg>
  
<span>DESTINOS</span>

</div>

底边奇怪的圆形矩形

Rectangle with strange rounded bottom side

css

rounded-corners

css-shapes