Question

我想让.main-div像这张图片一样

.main-div {
  width: 100px;
  height: 100px;
  background-color: Red;
  border-radius: 30px/20px;
}

<div class="main-div"></div>

我的JSFiddle是here。

Answer 1

您可以使用伪元素进行操作并实现该形状

body {
  background: lightgray;
}
.main-div {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 100px;
  background-color: red;
  border-radius: 30%/50%;
  background: url(https://i.stack.imgur.com/CWoXa.png) center center no-repeat;
  background-size: 110px 110px;
}
.main-div::after {
  content: '';
  position: absolute;
  left: 5px; top: -5px;
  width: 100px;
  height: 110px;
  background: inherit;
  background-size: inherit;
  border-radius: 50%/30%;
}
.main-div + .main-div {
  background: gray; 
}

<div class="main-div"></div>
<div class="main-div"></div>

Answer 2

您的图像半径看起来不像标准CSS边框半径。如果是，则需要使用图像预处理（在后端，例如GD或Photoshop等独立工具）或使用有限支持的Clipping Mask。使用边框半径可以产生类似的效果。

.main-div {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 40%;
    overflow: hidden;
    position: relative;
}

.main-div img {
  width: 100%;
  position: absolute;
  left: -50px;
  top: -50px;
  margin-top: 50%;
  margin-left: 50%;
}

<div class="main-div">
  <img src="http://lorempixel.com/200/200/"/>
</div>

Answer 3

当Justinas评论in their answer时，示例图片的边框看起来不像仅使用border-radius重新创建。这是因为轮廓不是椭圆。

有了良好的浏览器支持，可以使用SVG执行此操作，如下所示。

＆＃13;

/* set size of and center SVG */
svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

＆＃13;

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="outline">
      <!-- use Bezier curves to define outline -->
      <path d="M 0 100
               C 0 0, 40 0, 100 0
               C 160 0, 200 0, 200 100
               C 200 200, 160 200, 100 200
               C 40 200, 0 200, 0 100
               Z" />
    </clipPath>
  </defs>

  <image x="0" y="0" width="200" height="200"
     xlink:href="https://placehold.it/200"
     clip-path="url(#outline)" />
</svg>

＆＃13;

这会将clipping in SVG与clipPath元素结合使用。您可以定义用于剪裁的任何路径。我在这里使用了四个Bezier curves。您可以调整控制点所在的位置，或者根据需要将其更改为使用完全不同的内容。

此方法的一个额外好处是，现在可以轻松应用其他（高级）滤镜，例如模糊图像或应用投影。

＆＃13;

/* set size of and center SVG */
svg {
  display: block;
  width: 204px;
  height: 204px;
  margin: 0 auto;
}

＆＃13;

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="outline">
      <!-- use Bezier curves to define outline -->
      <path d="M 0 100
               C 0 0, 40 0, 100 0
               C 160 0, 200 0, 200 100
               C 200 200, 160 200, 100 200
               C 40 200, 0 200, 0 100
               Z" />
    </clipPath>
    <filter id="dropshadow" x="-30%" y="-30%"
            width="160%" height="160%"
            color-interpolation-filters="sRGB">
      <!-- define color of shadow here -->
      <feComponentTransfer in="SourceAlpha">
        <feFuncR type="linear" slope="0"
                 intercept="0.518"></feFuncR>
        <feFuncG type="linear" slope="0"
                 intercept="0.698"></feFuncG>
        <feFuncB type="linear" slope="0"
                 intercept="0.867"></feFuncB>
      </feComponentTransfer>
      <!-- define blur of shadow here -->
      <feGaussianBlur stdDeviation="2" />
      <!-- we can offset the shadow -->
      <feOffset result="shadow" dx="1" dy="1" />
      <!-- put shadow below original content -->
      <feBlend in="SourceGraphic"
               in2="shadow" mode="normal" />
    </filter>
  </defs>

  <g transform="translate(2, 2)"
     filter="url(#dropshadow)">
    <image x="0" y="0" width="200" height="200"
      xlink:href="https://placehold.it/200"
      clip-path="url(#outline)" />
   </g>
</svg>

＆＃13;

Answer 4

添加此样式。您可以根据自己的要求更改border-radius：

div {
    border: 2px solid #a1a1a1;
    padding: 10px 15px; `enter code here`
    background: #dddddd;
    width: 100px;
    border-radius: 55px;
}

Answer 5

.element {
  border-radius: 50px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>


<a href="https://imgbb.com/"><img src="https://image.ibb.co/irvmO5/html5.png" alt="html5" border="0" class="element"></a><br /><a target='_blank' href='https://imgbb.com/'>Rounded rectangle clip mask</a><br />
</body>

</html>

如何给边框半径制作像这个图像的元素......？

5 个答案: