信封的基本效果.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Letter Effect</title>
<style>
.letter-box {
width: 190px;
height: 100px;
background: repeating-linear-gradient(
45deg,
#E55F56, #E55F56 5px,
#FFF 0, #FFF 10px,
#4D8EDE 0, #4D8EDE 15px,
#FFF 0, #FFF 20px);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.letter-box::after {
content: 'OK';
position: absolute;
right: -4px;
top: -4px;
text-align: center;
color: #FFF;
width: 20px;
height: 20px;
font-size: 8px;
border-radius: 50%;
line-height: 20px;
background: #E55F56;
}
.letter-container {
width: 180px;
height: 90px;
background: #FFF
}
</style>
</head>
<body>
<div class="letter-box">
<div class="letter-container"></div>
</div>
</body>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: