div的形状不规则

Question

我想创建一个具有不可变形状的div元素：

是否可以创建两个div--首先应该包含HEAD TITLE和不可变形状（看屏幕），第二个应该包含文本？

感谢。

Answer 1

这是你在寻找什么，使用Alien先生所说的：

＆＃13;

＆＃13;

 .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;
        }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用标题div的高度，以便获得完整的圆形边框。这样，你的标题就是＆＃39;会有一个圆润的感觉，而不是一个正方形的背叛＆＃39;感受到它：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;