div 的不规则形状

Question

我想创建一个 div 不规则形状的元素：

是否可以创建两个 divs - 第一个应该包含 HEAD TITLE 和不规则形状（看屏幕），第二个应该包含文本？

谢谢。

Answer 1

这是您要查找的内容，使用的是 Alien 先生所说的内容：

 .wierd{
            border:2px solid #000;
            border-radius:50% 50% 0 0;
            border-bottom:0;
            color:#F00;
            width:400px;
            text-align:center;
        }

        .rect{
            border:2px solid #000;
            width:600px;
        }

   <div class="wierd">HEAD TOP TITLE</div>
<div class="rect">
    text text text text text text text text
</div>

Answer 2

您可以使用标题的高度 div 以获得完整的圆形边框。这样，您的 'title' 就会有一种圆润的感觉，而不是 'square offish' 的感觉：

.title {
  border: 2px solid black;
  border-bottom: none;
  border-radius: 50%;
  width: 50%;
  height: 90px;
  text-align: center;
  background: lightgray;
  margin-bottom: -70px;
}
.text {
  border: 2px solid black;
  min-height: 100px;
  background: white;
}

<div class="title">Some Title</div>
<div class="text">Some Text. Ok, I mean quite a bit of text, but just enough to span more than a single line...Some Text. Ok, I mean quite a bit of text, but just enough to span more than a single line... But apparently, do to that, I needed to duplicate this line of text.
  But now after explaining that I needed to expand on the text, it's got longer! Long enough to definately span more than a single line!</div>

div 的不规则形状

Irreagular shape of div

css

css-shapes