本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作斜角装饰文字

本文介绍如何使用CSS 3将“新文章”、“新到商品”、“限时抢购”等文字制作为位于图片或div元素的右上角的斜角装饰文字。

实际运行结果

制作图片的斜角装饰文字

新到商品

制作div元素的斜角装饰文字

新文章

制作图片的斜角装饰文字

图片的斜角装饰文字与div元素的斜角装饰文字的制作原理大致相同。

HTML代码

将装饰文字与img元素并列放置在一个div元素内。

<div class="side-corner-tag">
    <img src="1.jpg" alt="" />
    <p><span>新到商品</span></p>
</div>

CSS 3样式代码

制作要点在于将容器元素的overflow样式属性值设置为hidden,以及将容器元素的padding样式属性值设置为5px。同时,将display样式属性值设置为inline-block。

.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-weight: 900;
} 
 
.side-corner-tag p {
    display: inline;    
}

接下来,制作用于放置斜角装饰文字的span元素的样式(其视觉效果为一个斜角装饰条)。在此处指定斜角装饰条的宽度,将其倾斜,并为其添加阴影。

.side-corner-tag p span {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 22px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

制作div元素的斜角装饰文字

HTML代码

将装饰文字与div元素并列放置在一个div元素内。

<div class="side-corner-tag">
    <div class="box"></div>
    <p><span>新文章</span></p>
</div>

CSS 3样式代码

除了需要使用上面所介绍过的所有样式代码之外,我们需要通过div元素的box样式类来定义一下div元素的样式。

.box{
    width:300px;
    height:270px;
    border:1px solid #dadada;
    background-color:#fff;
}