Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > How to achieve rounded corners and concave effect in css

How to achieve rounded corners and concave effect in css

王林

Release： 2020-07-14 17:05:43

forward

4891 people have browsed it

How to achieve rounded corners and concave effect in css

Implementation ideas:

(Recommended tutorial: css quick start)

Two divs side by side, in the second Define a div named item with 2 times the width and height, set border-radius: 50% for the item, and then absolutely position it.

Code implementation:

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      overflow: hidden;
      background: #655;
      text-align: center;
      position: relative;
      float: left;
    }
    .item {
      width: 100px;
      height: 100px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: -50px;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box">
    <div class="item"></div>
  </div>
</body>
</html>

Copy after login

Implementation effect:

How to achieve rounded corners and concave effect in css

The above is the detailed content of How to achieve rounded corners and concave effect in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css

source：csdn.net

Previous article：2021 css commonly used code collection Next article：How to center a div? How to center an absolutely positioned div?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn