Question

enter image description here

我想在div中的css3和html5中创建这个例子。

感谢所有人！

Answer 1

其实我不应该回答这个问题。当您遇到代码时，它可以帮助您，而不是让其他人为您编写代码。但是，嘿，这是复活节，因为它很容易......

div {
    background: black;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin-left: 150px;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    left: -150px;
    top: 50px;
    bottom: 50px;
    right: -75px;
    background: red;
    border-top-left-radius: 40px 75px;
    border-bottom-left-radius: 40px 75px;
    z-index: -1;
}

和演示：http://jsfiddle.net/o004hrqz/

如果您想要我解释一下，请告诉我。

Answer 2

<html>
<head>

  <style type="text/css">
  .div1 {
    width: 250px;
    height: 60px;
    margin-top: 50px;
    background-color: #F00;
    position: relative;
    border-top-left-radius: 40px 75px;
    border-bottom-left-radius: 40px 75px;
  }
  .div2 {
    width: 100px;
    height: 100px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: -20px;
  }
  </style>

</head>

<body>

<div class="div1">
  <div class="div2">
  </div>
</div>

</body>
</html>

CSS中的CSS3边框半径和更大的舍入div

2 个答案: