欢迎来到覃师宁博客
帝国cms使用手册

css左上角热门/头条倾斜45度样式效果制作

编辑:覃师宁 来源:qinshining.com 时间:2022-01-02 阅读量: 人已围观

今天有一妹子(蒙爱明博客)咨询css左上角热门/头条倾斜45度样式效果如何制作,具体要求如下图

css左上角热门/头条倾斜45度样式效果制作

并且要求不是使用图标或者图片完成,就html配合css写出样式

其实这个要求挺简单的,先写html代码

<div class="ihot"><p>头条</p></div>

在写css代码,css代码分两步,一是写出三角形样式,这里使用position相对定位和绝对定位配合

.ihot {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #F54E48;
    border-right: 50px solid transparent;
}

二是写出头条字体位置,同样使用position相对定位和绝对定位配合,至于倾斜45度就要使用transform: rotate(-45deg);

.ihot p {
    position: absolute;
    top: -48px;
    left: -4px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    width: 30px;
    padding: 0 5px;
    border-radius: 3px;
    color: #fff;
    margin: 4px 8px 0 0;
    transform: rotate(-45deg);
}

这样,css左上角倾斜45度的头条或者热门样式就写好了,挺简单!

 

感谢您的支持,我会继续努力的!
扫码支持
支付宝扫一扫,向我打赏
下一篇:很抱歉没有了

相关文章

文章评论

人参与,共有 0 条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表

微信订阅号