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>