2

在此处输入图像描述

如何在 css 中制作类似于附加图像的背景？我已经尝试过边框，这样我就可以给它一个像黑色部分一样的形状，但在那种情况下我不能写文字，所以我猜平行四边形的边框形状不会有任何其他想法？

4

3 回答 3

4

你可以这样写： CSS

.tab{
    width:200px;
    height:40px;
    position:relative;
    background:#000;
}
.tab:after{
    content:'';
    right:-40px;
    top:0;
    position:absolute;
    width:0;
    height:0;
    border-width:20px;
    border-color: transparent transparent #000 #000;
    border-style:solid;
}

检查这个http://jsfiddle.net/696Sb/

Y0u 也可以为此使用 css3 转换。像这样写：

.tab:after{
    content:'';
    right:-30px;
    top:10px;
    position:absolute;
    width:60px;
    height:60px;
    background:#000;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

检查这个http://jsfiddle.net/696Sb/1/

于 2012-05-28T06:32:56.110 回答
2

这里有 2 个在 CSS 中制作对角线/三角形的教程：

您是否希望能够在最上面的黑色水平线（对角线左侧）下方书写？

于 2012-05-28T06:33:40.833 回答
1

嘿，现在您可以像这样在 css 中的属性之后和之前使用它

HTML

<div class="shape"></div>

CSS

    .shape{
background:#000;
    margin:40px 20px;
    height:100px;
    width:700px;
    position:relative;
}
.shape:after{
content:'';
position:absolute;
    top:-20px;
    right:0;
    height:20px;
    border-left:solid 30px #000;
    border-right:transparent 30px solid;
        border-top:transparent 20px solid;
}


.shape:before{
content:'';
position:absolute;
    top:-20px;
    left:0;
    right:60px;
    height:20px;
background:#000;
}

现场演示http://jsfiddle.net/uuxd8/

更新

现场演示二http://jsfiddle.net/uuxd8/1/

于 2012-05-28T06:34:04.300 回答