Question

我正在尝试使用like this雕刻顶部边框的div：

使用CSS可以吗？

我已经用半径倒数完成了顶部栏，但是不知道如何做到这一点！

实际顶部栏带有雕刻的底部边框：

.hqtopbar {
    background-color: #00519C;
    text-align: center;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    clip-path: inset(0px 15px 0px 15px);
    margin-left: -15px;
    margin-right: -15px;
}

Answer 1

首先，您可以执行以下操作。

.box {
  background: #d89d98;
  display: flex;
  justify-content: space-around;
  width: 300px;
  height: 200px;
  align-items: center;
  position: relative;
}

.box:before {
  content: '';
  width: 300px;
  height: 70px;
  background: #fff;
  top: 0;
  position: absolute;
  border-radius: 0 0 50% 50%;
  
}

<div class="box">
  <div> Menu 1 </div>
  <div> Menu 2 </div>
  <div> Menu 3 </div>
</div>

Answer 2

以下是该工作的小提琴：http://jsfiddle.net/frnm9ymo/7/

CSS：

* {
  font-family: arial;
}

#wrapper {
  background: #c7dae7;
  width: 400px;
  nin-height: 400px;
  display: block;
  float: left;

}

#container {
  margin: 20px;
  display: block;
  background: #f6f7fb;
  border: 1px solid #dfe2eb;
}

#titlebar {
  margin: 0;
  padding: 15px 20px;
  display: block;
  background: #fff;
  overflow: none;
  min-height: 30px;
  border-bottom: 1px solid #dfe2eb;
}

#contents {
  margin: 0 0 -40px 0;
  padding: 7px;
  display: block;
}

#textwrap {
  margin: 5px;
  padding: 10px 20px;
  display: block;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  position: relative;
  -webkit-border-radius: 15px 5px 15px 5px;
  -moz-border-radius: 15px 5px 15px 5px;
  border-radius: 15px 5px 15px 5px;

}

textwrap p {
  z-index: 100;
}

#enter {
  float: right;
  width: 80px;
  padding: 7px;
  background: #4992e6;
  color: #fff;
  font-weight: bold;
  border: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#arrow {
  background: #ffffff;
  border-top: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 0;
  right: 30px;
  margin-top: -17px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(45deg);
  z-index: 50;
}

HTML：

<div id="wrapper">
<div id="container">
  <div id="titlebar">
  text

  <button id="enter">
   ENTER
  </button>
  </div>
  <div id="contents">

  <div id="textwrap">
  <div id="arrow">

  </div>
  <p>
    VHS artisan forage cornhole echo park, PBR&B ugh lomo poutine readymade cray gastropub wolf YOLO. Ugh tattooed umami, brooklyn VHS chambray crucifix celiac fixie. Pabst ennui neutra, chia truffaut brunch microdosing chartreuse flexitarian heirloom typewriter. Bushwick tattooed four dollar toast ramps, lomo sartorial pabst bicycle rights. Viral brunch direct trade chartreuse. Vegan squid pinterest, umami sartorial intelligentsia truffaut vice freegan normcore beard venmo pour-over. Direct trade knausgaard master cleanse plaid, wayfarers kogi kombucha keffiyeh.

Mustache chicharrones meggings, kale chips distillery yuccie lumbersexual shabby chic beard master cleanse crucifix blue bottle pour-over venmo. Sustainable pabst cronut whatever kale chips cliche everyday carry kinfolk, fap chicharrones gluten-free meggings microdosing umami. Irony selvage jean shorts synth gastropub, roof party keytar. Franzen fixie lumbersexual, mustache church-key flannel synth everyday carry gluten-free chartreuse pitchfork shoreditch. Tumblr viral chillwave mlkshk paleo. Jean shorts swag meggings pabst distillery tote bag. Pour-over messenger bag PBR&B cold-pressed VHS.
  </p>

  </div>

  </div>
</div>

</div>

如何制作不规则的div边框

2 个答案: