Question

最近我在Dribbble上看到了一个设计概念，它真的让我很振奋。特别是在顶部和底部具有弯曲U形的侧边栏让我对制作标签堆栈或流程图有很好的想法。我可以用alpha图像制作它，但最好使用纯CSS，我不介意CSS3。但是我对CSS3并不熟悉，希望有人可以建议我这样做。

you can see a U-shape concavity at the top and a same shape convexity at the buttom

从http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177

裁剪

http://dribbble.com/shots/1213195-CMS-Concept

的原始设计

Answer 1

我正在使用CSS3 transform属性来扭曲放置在每个彩色部分顶部的两个伪元素:before和:after。我不得不在绿色下方放置一个短柱，以显示绿唇。

请参阅fiddle

主要形状CSS如下：

/* Shape */

.flap {
    display: block;
    position: relative;
}
.flap:before, .flap:after {
    content:'';
    display: block;
    position: absolute;
    top: -2em;
    z-index: 5;
    width: 100%;
    height: 4em;
    border-radius: 1em;
    background-color: inherit;
    border: inherit;
    border-width: 4px;
}
.flap:before {
    left: -50%;
    -webkit-transform: skew(60deg);
    -moz-transform: skew(60deg);
    -o-transform: skew(60deg);
}
.flap:after {
    right: -50%;
    -webkit-transform: skew(-60deg);
    -moz-transform: skew(-60deg);
    -o-transform: skew(-60deg);
}

Answer 2

有许多好的方法 - 我想添加一个采用不同方法的解决方案，并且在所有HTML5浏览器中都兼容。

作为纯CSS解决方案，它不是直截了当的优雅，但它使用画布生成边框，因此也提供了生成渐变等的扩展可能性。

<强> HERE IS AN ONLINE DEMO

结果如下：

Example

以下是一个简单的示例，如何在JavaScript中使用它：

该函数有三个参数：

要添加边框的元素
曲线的高度
背景颜色

例如：

curlyBorder(border1, 24, '#073');
curlyBorder(border2, 24, '#037');

<强> HTML：

<div id="border1">Text 1</div>
<div id="border2">Text 2</div>

CSS：（主要用于定义尺寸和颜色）

#border2 {
    position:relative;
    top:-25px;
}
#border1, #border2 {
    width:300px;
    height:150px;
    padding:30px 16px;
    color:#fff;
    font:26px sans-serif;
    text-align:center;
}

<强> JavaScript的：

使用图形生成画布并将其设置为元素背景的函数。代码未经优化。无论如何，它可以扩展到支持渐变，更好的边界线等。为了举例，我把它保持在最低限度：

function curlyBorder(el, ch, color) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    render();

    function render() {

        var w = el.clientWidth,
            h = el.clientHeight,
            t = w * 0.333;

        canvas.width = w;
        canvas.height = h;

        /// define border
        ctx.moveTo(0, 0);
        ctx.lineTo(t, 0);

        /// create one curve positive direction
        renderCurve(t, ch, 1);

        ctx.lineTo(w, 0);
        ctx.lineTo(w, h - ch);
        ctx.lineTo(w - t, h - ch);

        /// create one curve negative direction
        renderCurve(t, ch, -1);

        ctx.lineTo(0, h - ch);
        ctx.closePath();

        /// color or gradient
        ctx.fillStyle = color;
        ctx.fill();

        /// set this canvas as background to element
        el.style.background = 'url(' + 
            canvas.toDataURL() + ') no-repeat top left';

        /// we use trigonometry to make the curved line:
        function renderCurve(t, ch, d) {

            var x, sx, ex,dg = -90, dgd = 360 / t, y;

            if (d > 0) {
                x = t;
                for(; x < t * 2; x++) {
                    y = ch * 0.5 * Math.sin(dg * Math.PI / 180);
                    ctx.lineTo(x, y + ch * 0.5);
                    dg += dgd;
                }
            } else {
                x = t * 2;
                for(; x > t; x--) {
                    y = ch * 0.5 * Math.sin(dg * Math.PI / 180);
                    ctx.lineTo(x, h - ch * 0.5 + y);
                    dg += dgd;
                }
            }
        }
    }
}

这样做的缺点是效率不如CSS，但如果只保留几个元素，性能就可以接受。

您需要调整元素的位置。我用位置相对和偏移对下一个元素进行了硬编码 - 这可以通过其他CSS规则更好地解决（甚至在函数本身中实现）。

从积极的方面来说：在设计可能性方面你有更多的自由，与使用缩放的图像相比，你可以改变尺寸并获得高质量的渲染。

它将在支持画布的所有HTML5浏览器中呈现相同的内容（我认为即使是IE＆lt; 9，exCanvas也可以渲染它，但我还没有检查过。）

Answer 3

在每个div的末尾创建普通边框，然后将形状放在div中心的绝对位置，

您可以使用边框属性使用CSS 3绘制形状..

.semicirclebottom{
 height:45px;
 width:90px;
 border-radius: 0 0 90px 90px;
 -moz-border-radius: 0 0 90px 90px;
 -webkit-border-radius: 0 0 90px 90px;
 background:green;
 }

 .oval{
 height:180px;
 width:45px;
 border-radius: 90px / 45px;
 -moz-border-radius:90px / 45px;
 -webkit-border-radius: 90px / 45px;
 background:green;
 }

使用曲线三角形可以使它接近您的要求..

 div {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
background-color:green;
width:100px;
height:100px;
position:absolute;
top:20px;
left:-50px;
-webkit-border-radius: 0 20px 0 0;
-moz-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;

}

Answer 4

很抱歉成为坏消息的承担者，但是没有办法实现这个效果。你可以使用：after伪元素制作一个带圆角的正方形，旋转它并定位它，但这是你能得到的最接近的，它看起来仍然不是特别好。

我认为使用图形（图像/ SVG）将是最佳解决方案。

编辑：使用Prasanna的想法对一些CSS进行了破解，这就是我想出的。不是最好的，但它是我能得到的最接近的。

.main {
    width: 200px;
    height: 200px;
    position: relative;
}
.semicirclebottom{
    height:40px;
    width:80px;
    border-radius: 0 0 90px 90px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    bottom: -20px;
    z-index: 999999;
 }

.green {
    background: green;
}

.red {
    background: red;
}

http://jsfiddle.net/5gbLB/2/

Answer 5

我复制了Prasanna的ans ..这是我最接近的..

http://jsfiddle.net/P2PEH/

.semicirclebottom{
 margin-right: 100px;
 height:50px;
 width:120px;
 border-radius: 0 0 120px 120px;
 -moz-border-radius: 0 0 120px 120px;
 -webkit-border-radius:  0 0 140px 140px;
 background:green;
margin-left:170px;
 }

.rectangle {    
 height:180px;
width:545px;
 background:green;
}

错误..可怕的编码方式，我猜...... SVG可以做到这一点。但是第一张带有黑色背景平铺图案的图片，我也怀疑SVG

Answer 6

检查Js小提琴

cjross小提琴的修改

http://jsfiddle.net/MS5J7/6/

.blue-flap {
    background-color: #4DA0E3;
    border-top: 4px solid #4DA0E3;
}

.green-flap {
    background-color: #65DA83;
    border-top: 4px solid  #65DA83;
}
.brown-flap {
    background-color: #222222;
    border-top: 4px solid #222222;
}

Answer 7

这是我尝试使用:after和:before伪元素中的边框，变换和其他内容。

enter image description here

当然，您可以调整值以获得像素完美的结果。但我不能在形状下重新创建小边框或阴影......：/

的 http://jsfiddle.net/WHvsM/

弯曲的边框CSS实现

7 个答案: