Как сделать неправильные границы div - PullRequest
Новая
       4

Как сделать неправильные границы div

0 голосов
/ 31 октября 2018

Я пытаюсь сделать 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;
}

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Как стартер, Вы можете сделать что-то вроде этого. 

.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>
0 голосов
/ 01 ноября 2018

Вот скрипка с этой работой: 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>
...