像div容器一样创建熊

Question

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

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

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

 /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('payment', require('./components/Payment.vue'));
Vue.component('form-ajax', require('./components/FormAjax.vue'));
Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

    Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#app'
});

Echo.private(`articles.admin`)
    .listen('ArticleEvent', function(e)  {
        console.log(e);
    });

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

我的主要问题是我不知道如何将半圆附加到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>