在CSS中插入边框-半径形状？

Question

有没有办法用CSS制作这个形状的图像？CSS3很好，不需要IE的兼容性，.The渐变部分并不重要，这是右下角的曲线，我看不出该怎么办。我已经看到了各种各样的jQuery角插件，但到目前为止还没有适合我的。我不能使用背景图片，因为这里面的内容是可变长度的。

​

​

编辑:谢谢你的回复，令人印象深刻！然而，有一件事-在图像本身，有一个蓝色的背景和一个无缝的灰色边界周围的整个东西，包括右侧的曲线。如果解决方案涉及到额外元素上的边界半径‘hack’，那么保留这个边界可能是不可能的，但如果这也可以保留，那就更好了。

Answer 1

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

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>

Answer 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。

Answer 3

圆角边框不能在单个DOM对象上使用标准CSS完成，但可以使用CSS通过添加额外的元素来完成。

这样做的诀窍是使用CSS :before和:after选择器在主元素的两侧有效地创建一个额外的元素，然后使用适当的border-radius和background来调整该元素的形状。

这并不容易，但它已经成为一个相当常见的技巧，将其用于选项卡。例如，see here是一个很好的教程。

希望这能有所帮助。