html CSS实现三角形缺口

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CSS实现三角形缺口相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title>CSS实现三角形缺口</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style type="text/css">
html, body {
  height: 100%;
}
.title-wrap{
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: #ff0000;
}
.wrap{
  height:100%;
}
.title-wrap b{
    position: absolute;
    top: 45px;
    right: 0px;
    line-height: 0;
    font-size: 0;
    border-right: 7px solid #ffffff;
    border-top: 7px dashed transparent;
    border-bottom: 7px dashed transparent;
}
</style>

<div id="wrap">


    <div class="test">

        <span class="title-wrap">
            优惠
            <b></b>
        </span>

    </div>
    
</div>
</body>
</html>

以上是关于html CSS实现三角形缺口的主要内容，如果未能解决你的问题，请参考以下文章