矩形底部有奇怪的圆形

时间：2016-04-07 17:59:35

标签： css css3 css-shapes rounded-corners

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

.figure {
  height: 400px;
  width: 200px;
  background-color: black;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px;
}
<div class="figure"></div>

但我不能让它看起来像这张图片。

enter image description here

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

6 个答案:

答案 0 :(得分：3)

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div class="figure">
  <a>DESTINOS</a>
</div>
＆＃13;
＆＃13;
＆＃13;

主要来自：https://stackoverflow.com/a/25713496/383904

答案 1 :(得分：3)

<强> SVG ：

形状是在 Adob​​e Illustrator （免费替代方案： Inkscape ）上重建的，并且因为它不对称而得到改进，如下图所示，比较原始图像背后是粉红色的线条：

pink line

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>

答案 2 :(得分：2)

试一试：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;
}

答案 3 :(得分：0)

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

然而，可能会使两侧变圆，但效果可能不是您正在寻找的。

＆＃13;
＆＃13; 
.figure {
  height: 100px;
  width: 300px;
  margin: auto;
  background-color: black;
  border-radius: 0 0 20px 20px / 0 0 100% 100%;
}
＆＃13; 
<div class="figure"></div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

这是我尝试过的一个例子。它并不完美，但它几乎看起来像我想的那样。

  

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

答案 5 :(得分：0)

为了好玩，因为mix-blend-mode无处不在：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Pen to play with

相关问题
最新问题