首页 » WEB前端 » 正文

CSS3 波浪形下划线

yibin 2018年04月20日 WEB前端 2431 views 0

扫一扫用手机浏览

css很棒的波浪形下划线

html代码:

<div>
    An <span class="error">error</span>, a <span class="warning">warning</span> and an <span class="info">info</span> baked by techbrood.
</div>


CSS样式

html,
body {
    height: 100%;
}
body {
    font-family: Open Sans, sans-serif;
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.error {
    position: relative;
}
.error::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #dc3912, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}
.warning {
    position: relative;
}
.warning::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #f90, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}
.info {
    position: relative;
}
.info::before {
    content: '';
    position: absolute;
    bottom: -0.125em;
    width: 100%;
    height: 0.25em;
    background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background: linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%);
    background-size: 0.5em 0.5em;
    background-repeat: repeat-x, repeat-x;
}

图片.png

效果


查看演示效果

赞(7 打赏
  • 微信
  • 支付宝
  • QQ钱包

感谢您对优美的支持!

非特殊说明,本文由优美尚品主题原创或收集发布,欢迎转载

转载请注明本文地址:http://umhtml.com/web/49.html

发表评论

优美最新主题发布

优美最新主题,【轻奢版】响应式主题
致简风格,简约而不简单

查看详情