怎么用css实现长方形左边缺少一个三角形缺口
就是实现这样的效果
<template>
<div>
<div>
<div class="cfx">
<div class="text">19% OFF</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="less" scoped>
.cfx {
width: 200px;
height: 0;
position: relative;
border: 50px solid #f00;
border-left: 50px solid transparent;
.text {
position: absolute;
right: -36px;
top: -18px;
font-size: 32px;
color: #fff;
}
}
</style>这样也可以实现效果了！仅供参考！
用一个白色背景的div，然后rotate下
https://www.w3school.com.cn/cssref/pr_transform.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Document</title>
<style>
* {
padding: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置颜色变量 */
:root {
--color: red;
--color-after:white;
}
.box {
position: relative;
width: 100px;
height: 50px;
margin: 50px;
background-color: var(--color);
}
.box:after {
content: "";
position: absolute;
left: 0;
top:0;
width: 0;
height: 0;
border-top:24px solid transparent;
border-left:30px solid var(--color-after);
border-bottom:25px solid transparent;
z-index:9;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置颜色变量 */
:root {
--color: red;
--color-after:white;
}
p {
position: relative;
width: 150px;
height: 50px;
margin: 50px;
background-color:red;
line-height:50px;
text-indent:35px;
overflow:hidden;
}
p:after {
content: "";
position: absolute;
left: -35px;
top:0;
width: 50px;
height: 50px;
background-color:#fff;
transform:rotate(45deg);
z-index:9;
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
</body>
</html>