如何与内半径边界？ [英] How to make border with inside-radius?

问题描述

我正在尝试在角落处创建一个内圈的div。它看起来应该如下图所示

I'm trying to create a div with inside circle at the corner. It should look like the picture shown below

有人可以帮忙解决这个问题吗？

Can someone help to solve this problem?

推荐答案

你可以这样做：

.box {
  width: 200px;
  height: 200px;
  background:
    radial-gradient(circle at 0 100%, transparent 14px, red 15px) bottom left,
    radial-gradient(circle at 100% 100%, transparent 14px, red 15px) bottom right,
    radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right,
    radial-gradient(circle at 0 0, transparent 14px, red 15px) top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

<div class="box"></div>

更多info：使用CSS3嵌入边界半径

但是如果你需要更复杂的边框形状，你可以使用背景图片或边框图片：

BUT (!) if you need more complexity on the shapes of that border, you could use a background image or a border image:

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}

<div class="box"></div>

更多信息：装饰边框css

这篇关于如何与内半径边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！