33

如何实现这一点<div>CSS

在此处输入图像描述

我的尝试:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid white;
    border-right: 80px solid red;
    width: 0;
}

我无法修改斜坡部分并在里面填充白色。

4

4 回答 4

16

我的尝试,如评论中所述(http://jsfiddle.net/8Zm96/):

div{
    width: 300px;
    height: 280px;
    background: #fff;
    border: solid 1px red;
    border-width: 0 1px 1px 1px;
    border-radius: 4px;
    margin-top: 40px;
    position: relative;
}

div:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -1px;
    border: solid 1px red;
    border-width: 1px 1px 0 0;
    border-radius: 25px 4px 0 0;
    height: 24px;
    width: 250px;
    background: #fff;
}

div:after{
    content: '';    
    position: absolute;
    top: -20px;
    left: 2px;
    border: solid 1px red;
    border-width: 0 0 1px 0;
    border-radius: 0 0 20px 0;
    height: 20px;
    width: 55px;
    background: #fff;
}

近距离放大,左角不合适,两条半曲线实际上相互弯曲,但在正常缩放时都看不到。这可能是手机和高分辨率屏幕的问题,它们可能会显示放大的内容,或者在正常缩放时更准确。

于 2013-04-19T12:09:20.267 回答
9

这是我最好的尝试:http: //jsfiddle.net/2y7TB/2/

这是我用过的: 在此处输入图像描述

我只在 Chrome 上测试过,如果你喜欢它并想要一个跨浏览器的解决方案,请询问:)

LE:似乎在最新版本的 Firefox 和 Opera 上也能正确显示。

.tab:before {
    content: '';
    position: absolute;
    top: -23px;
    right: -1px;
    border-right:1px solid orange;
    border-left:1px solid orange;
    border-top:1px solid orange;
    background:white;
    width: 247px;
    height:24px;
    border-top-right-radius:5px;
    border-top-left-radius:25px;
}

.tab:after {
    content: '';
    position: absolute;
    top: -9px;
    left:1px;
    border-right:1px solid orange;
    border-bottom:1px solid orange;
    border-top:none;
    background:white;
    width: 53px;
    height:9px;
    border-bottom-right-radius:180px;
    box-shadow:3px 3px 0px 3px white;
}
于 2013-04-19T10:49:07.610 回答
8

可以用 css 做到这一点,但它有很多摆弄(=潜在的跨浏览器问题)。我设置了一个关于如何使用 CSS 的小提琴。然而,人们可以在边界内看到一些干扰(尤其是在缩放时)。这只是一个草图,当然可以优化。

更好和跨浏览器可靠的解决方案是在下面标记的位置使用背景图像。如果你愿意,你可以使用伪元素。

在此处输入图像描述

基本上我用两个旋转和倾斜的伪元素构建斜坡。该解决方案优于仅使用边框半径的解决方案(我认为这是非常次优的,因为浏览器呈现圆角的方式完全不同),但由于transform.

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}
于 2013-04-19T09:07:22.930 回答
4

也许这段代码?jsFiddle,我不确定你是否想要,但它适用于所有浏览器..

HTML:

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS:

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}
于 2013-04-19T09:07:40.833 回答