CSS中的插入边框半径形状？答案

【问题标题】：Inset border-radius shape in CSS?CSS中的插入边框半径形状？
【发布时间】：2013-01-28 20:02:56
【问题描述】：

有没有办法在 CSS 中制作这个形状图像？ CSS3很好，不需要IE兼容。渐变部分不重要，就是右下角的那条曲线，我看不出来怎么做。我见过各种 jQuery 角插件，但到目前为止没有什么对我有用。我不能使用背景图片，因为其中的内容是可变长度的。

编辑：感谢您的回复，非常令人印象深刻！但有一件事 - 在图像本身中，有一个蓝色背景和一个无缝的灰色边框，包括右侧的曲线。如果解决方案涉及对额外元素的边界半径“hacks”，则可能无法保留此边界，但如果也可以保留此边界，那就更好了。

【问题讨论】：

请参考此制作圆角边框Click here
谢谢，但据我所知，那里没有任何东西可以让我接近图像中的形状。
不是圆角的问题。
@Morpheus 为什么要投反对票？这个问题基于边界半径

标签： jquery html css css-shapes

【解决方案1】：

我创造了一些东西。可能有更好的解决方案，但这可能会有所帮助。

jsFiddle

CSS：

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML：

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>

【讨论】：

看起来离我很近。但是，#fff 背景不是很好... :(
@jeroenvisser101：你说得对。一旦找到更好的解决方案，我将立即编辑我的答案。我现在正在工作，所以我不能再花时间在这件事上。
您在获得相同的形状方面做得很好，但是是否也可以获得原始图像中的灰色边框或框阴影？我想知道 CSS 是否还不能做到这一点。

【解决方案2】：

这是形状的 CSS。你需要多种形状来完成你想要的。

body{background:white;}

.Shape{margin:20px 30px;}

.Shape1{
  position:relative;
  width:200px;
  height:65px;
  background:blue;
  border-radius:20px;
  border:2px solid white;
  z-index:2;
  top:0px;
  left:0px;}

.Shape2{

  position:relative;
  width:70px;
  height:40px;
  background:blue;
  border-radius:12px;
  border-bottom:2px solid white;
  z-index:3;
  top:-42px;
  left:170px;}

.Shape3{
  position:relative;
  width:20px;
  height:20px;
  background:blue;
  z-index:4;
  top:-64px;
  left:170px;}

.Shape4{
   position:relative;
   width:40px;
   height:46px;
   background:white;
   top:-110px;
   left:202px;
   z-index:3;
   box-shadow:inset 2px 0px 4px lightgray;
   border-bottom-left-radius:40px;}

.Shape5{
  position:relative;
  height:1px;
  width:218px;
  background:transparent;
  box-shadow:0px 0px 8px black;
  left:18px;
  top:-110px;}

.Shape6{
  position:relative;
  height:50px;
  width:20px;
  background:white;
  top:-160px;
  left:236px;
  z-index:4;}

.Shape7{
  position:relative;
  height:10px;
  width:50px;
  background:white;
  top:-210px;
  left:203px;
  z-index:4;}

还有 HTML：

  <div class="Shape">

  <div class="Shape1"></div>
  <div class="Shape2"></div>
  <div class="Shape3"></div>
  <div class="Shape4"></div>
  <div class="Shape5"></div>
  <div class="Shape6"></div>
  <div class="Shape7"></div>

  </div>

这是output 的 JsBin。

【讨论】：

从您以前的 cmets 中读取，如果您还想保留阴影，您只需添加更多形状。我在这里更新了 jsbin：jsbin.com/ajobos/7/edit 你可以不断调整它，直到你得到想要的效果。

【解决方案3】：

使用标准 CSS 无法在单个 DOM 对象上完成圆形边框，但您可以使用 CSS 通过添加额外元素来实现。

这样做的诀窍是使用 CSS :before 和 :after 选择器在主元素的任一侧有效地创建一个额外的元素，然后使用适当的 border-radius 和 background 来塑造它适合。

这并不容易，但将它用于标签已成为一种很常见的技巧。例如，see here 是一个很好的教程。

希望对您有所帮助。

【讨论】：