html - 创建像 div 容器一样的熊

Question

我正在尝试创建一个主要设计灵感来自下图的网站

我正在尝试创建三个类似于上图中三个熊形状的 div 容器。在这些 div 容器中，我放置了网站的内容。

我的主要问题是添加熊的头部和底部，我不想也不需要这些部分中的任何内容。

     content = document.getElementById("content");
content.style.paddingTop = content.offsetWidth/2 + "px";

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #00ADEF;
    font-family: arial, sans-serif;
}


#content {
    width: 60%;
    margin: auto;
    text-align: left;
    background-color: #F7F3E9;
}

    <article id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.</p>
    </article>

我的主要问题是我不知道如何将半圆附加到 div 的顶部。有什么建议吗？

Answer 1

你可以尝试使用伪元素和一些像这样的背景:

body {
margin:0;
background:#f2f2f2;
}

.panda {
  margin: 100px 20px;
  width: 150px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  vertical-align:top;
}


.panda:before {
  content: "";
  position: absolute;
  height: 50px;
  width: 20px;
  top: -50px;
  left: 10px;
  border-radius: 10px;
  transform: rotate(-40deg);
  z-index: -100;
}

.panda:after {
  content: "";
  position: absolute;
  height: 50px;
  width: 20px;
  top: -50px;
  right: 10px;
  border-radius: 10px;
  transform: rotate(40deg);
  z-index: -100;
}

.content:before,
.content:after {
  content: "";
  width: 150px;
  height: 100px;
  position: absolute;
  bottom: -50px;
  right: 0;
  border-radius: 50%;
  z-index: -99;
}

.content:after {
  top: -50px;
  bottom: auto;
}

.eyes:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 25px;
    top: -15px;
    left: 20px;
    background: black;
    border-radius: 50%;
    transform: rotate(-30deg);
}

.eyes:after {
    content: "";
    position: absolute;
    height: 20px;
    width: 25px;
    top: -15px;
    right: 20px;
    background: black;
    border-radius: 50%;
    transform: rotate(30deg);
}

.pink,
.pink:before,
.pink:after,
.pink .content:before,
.pink .content:after {
  background: pink;
}
.blue,
.blue:before,
.blue:after,
.blue .content:before,
.blue .content:after {
  background: blue;
  color:white;
}

.black {
  background:linear-gradient(to bottom,white 20%,black 0%, black 50%, white 45%);
  color:red;
}
.black .content:after {
  background: white;
}
.black:before,
.black:after,
.black .content:before{
  background: black;
}

<div class="panda pink">
  <div class="content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>
<div class="panda blue">
  <div class="content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum  ipsum lorem ipsum  ipsum lorem ipsum
  </div>
</div>

<div class="panda black">
  <span class="eyes"></span>
  <div class="content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
</div>