插入CSS中的边界半径形状？

有没有一种方法可以在CSS中制作这个形状图像？ CSS3很好，不需要IE的兼容性。它的渐变部分并不重要，它是右下角的曲线，我不知道该怎么做。我已经看到了各种jQuery角色插件，但到目前为止，没有什么可以用于我。我无法使用背景图片，因为此内容的长度可变。插入CSS中的边界半径形状？

enter image description here

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

来源

2013-02-13 mikel

请参考这个做圆角边框[点击这里]（http://www.css3.info/preview/rounded-border/） – snowp 2013-02-13 10:22:57

谢谢，但据我所知，没有什么可以让我靠近在我的形象中的形状。 – mikel 2013-02-13 10:26:21

这不是关于圆形边界的问题。 – Morpheus 2013-02-13 10:32:07

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

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>

来源

2013-02-13 10:20:26 Amberlamps

看起来很接近我。然而，＃fff背景并不是很好...... :( – jeroenvisser101 2013-02-13 10:23:06

@ jeroenvisser101：你是绝对正确的，当我找到更好的解决方案时，我会尽快编辑答案。在这个问题上不能再花费时间 – Amberlamps 2013-02-13 10:25:07

令人印象深刻，谢谢 – mikel 2013-02-13 10:29:09

这里的形状的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>

这里有一个JsBin为output。

来源

2013-02-13 10:30:28 frenchie

从以前的评论中读取，如果您还想保留阴影，只需添加更多形状即可。我在这里更新了jsbin：jsbin.com/ajobos/7/edit您可以继续调整它直到获得所需的效果。 – frenchie 2013-02-14 15:38:25

在单个DOM对象上无法使用标准CSS完成四舍五入的边框，但可以使用CSS通过添加额外的元素来完成此操作。

诀窍这样做是使用CSS :before和:after选择上主要元素的两侧，以有效地创建一个额外的元素，然后用适当的border-radius和background到形状，以适应。

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

希望有所帮助。

来源

2013-02-13 10:33:09 SDC

插入CSS中的边界半径形状？

回答

相关问题