使背景像CSS中的附加图像

时间：2012-05-28 06:03:27

标签： css css3

enter image description here

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

3 个答案:

答案 0 :(得分：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/

答案 1 :(得分：2)

以下是在CSS中制作对角线/三角形的2个教程：

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

答案 2 :(得分：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/

相关问题
最新问题