弯曲边框CSS实现 [英] Curved border CSS implementation

问题描述

最近，我在Dribbble上看到了一个设计概念，这确实启发了我.特别是在顶部和底部具有弯曲U形的侧边栏，使我对制作选项卡堆栈或流程图有很好的想法.我可以使用alpha图像来实现，但是使用纯CSS会更好，而且我不介意CSS3.但是我对CSS3不熟悉，希望有人可以建议我这样做.

裁剪自 http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177

> http://dribbble.com/shots/1213195-CMS上的原始设计-概念

解决方案

我正在使用CSS3 transform属性倾斜两个伪元素:before和:after，这些伪元素放置在每个彩色部分的顶部.我必须将一根作为存根放置在绿色下面，以显示绿色的嘴唇.

请参见小提琴

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);
}

Recently I saw a design concept on Dribbble, and it's really inspiring me. Especially the sidebar with a curved U-shape at the top and bottom gave me great thoughts on making a tabs stack or flow diagram. I can make it with alpha images, but it would be better to use pure CSS and I don't mind CSS3. However I'm not familiar with CSS3, and hope someone could suggest me a way to do it.

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

Original design at http://dribbble.com/shots/1213195-CMS-Concept

解决方案

I'm using CSS3 transform property to skew two pseudo elements :before and :after which are placed at the top of each coloured section. I had to place one as a stub underneath the green to get the green lip showing.

See fiddle

The main shapes CSS is below:

/* 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);
}

这篇关于弯曲边框CSS实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！