console 命令行工具 X clear

console

<!doctype html>
<html>

<head>
	<meta charset="utf-8" />
	<title>纯 css 实现角标</title>
</head>

<body>

    

	<div class="box-content">
		<!-- 角标 -->
		<div class="cornor-mark evaluated">
			<span class="cornor-mark-label">已评价</span>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quidem iure maxime error inventore unde qui, quam neque tempora cumque facere, beatae omnis tempore nulla repudiandae asperiores, quia quod sint?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aliquam, mollitia dicta repellendus pariatur in cupiditate dolore corporis ullam, ut odit, ea sit totam ad dolorem nostrum minus odio soluta.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, enim. Excepturi dolore tempore perferendis quisquam porro quis minima veniam enim ipsa sapiente aliquid, sed nisi dolorum harum odit, tempora quasi.</p>
    </div>
	<div class="box-content">
		<!-- 角标 -->
		<div class="cornor-mark rejected">
			<span class="cornor-mark-label">驳回</span>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quidem iure maxime error inventore unde qui, quam neque tempora cumque facere, beatae omnis tempore nulla repudiandae asperiores, quia quod sint?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aliquam, mollitia dicta repellendus pariatur in cupiditate dolore corporis ullam, ut odit, ea sit totam ad dolorem nostrum minus odio soluta.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, enim. Excepturi dolore tempore perferendis quisquam porro quis minima veniam enim ipsa sapiente aliquid, sed nisi dolorum harum odit, tempora quasi.</p>
    </div>
	<div class="box-content">
		<!-- 角标 -->
		<div class="cornor-mark closed">
			<span class="cornor-mark-label">关闭</span>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quidem iure maxime error inventore unde qui, quam neque tempora cumque facere, beatae omnis tempore nulla repudiandae asperiores, quia quod sint?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aliquam, mollitia dicta repellendus pariatur in cupiditate dolore corporis ullam, ut odit, ea sit totam ad dolorem nostrum minus odio soluta.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, enim. Excepturi dolore tempore perferendis quisquam porro quis minima veniam enim ipsa sapiente aliquid, sed nisi dolorum harum odit, tempora quasi.</p>
    </div>

    <a class="source-code" href="https://jsrun.net/9K9Kp/edit">查看源码</a>
</body>

</html>

.box-content {
    margin: 12px;
    padding: 12px 108px 12px 16px;
    border: 1px solid gainsboro;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.cornor-mark {
    width: 0;
    height: 0;
    border: 64px solid transparent;
    border-bottom-color: red;
    transform:  rotate(45deg);
    position: absolute;
    right: -64px;
    top: -64px;
}

.evaluated {
    border-bottom-color: #1296DB;
}

.rejected {
    border-bottom-color: #D81E06;
}

.closed {
    border-bottom-color: #D81E06;
}

.cornor-mark::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 28px solid transparent;
    border-bottom-color: aliceblue;
    transform: translate(-50%, -50%);
}

.cornor-mark-label {
    width: 4em;
    height: 1.2em;
    line-height: 1.2em;
    text-align: center;
    font-weight: 500;
    transform: translatex(-50%);
    color: aliceblue;
    /* background: yellow; */
    position: absolute;
    z-index: 10;
    bottom: -55px;
}

.source-code {
    margin-left: 12px;
}