创建像 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>

创建像 div-容器一样的熊

Create bear like div-containers

html

css

border

border-layout