محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
            
body {
    text-align: center;
}
            
.pencil {
    position: relative;
    margin: 30px auto;
    width: 32px;
}
            
.cap {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 20px;
    background: #e5e1d7;
    border-bottom: 5px solid #000;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 0 0 5px lightgray inset;
}
            
.pen-left {
    position: absolute;
    top: 20px;
    width: 8px;
    height: 70px;
    background: #b00;
}

.pen-left .bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 4px solid #b00;
    border-left: 4px solid #fc3;
    border-right: 4px solid #fc3;
}
            
.pen-middle {
    position: absolute;
    top: 20px;
    left: 8px;
    width: 16px;
    height: 70px;
    background: #e00;
}

.pen-middle .bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 4px solid #e00;
    border-left: 4px solid #fc3;
    border-right: 4px solid #fc3;
}
            
.pen-right {
    position: absolute;
    top: 20px;
    left: 24px;
    width: 8px;
    height: 70px;
    background: #b00;
}

.pen-right .bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 4px solid #b00;
    border-left: 4px solid #fc3;
    border-right: 4px solid #fc3;
}

.pencut {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: 16px;
    background: #fc3;
    clip-path: polygon(0 0, 32px 0, 24px 16px, 8px 16px);
}

.lead {
    position: absolute;
    top: 105px;
    left: 8px;
    width: 16px;
    height: 16px;
    background: black;
    clip-path: polygon(0 0, 16px 0, 8px 16px);
}
		</style>
	</head>
	<body>
		<div class="pencil">
            <div class="cap"></div>
            <div class="pen-left"><div class="bot"></div></div>
            <div class="pen-middle"><div class="bot"></div></div>
            <div class="pen-right"><div class="bot"></div></div>
            <div class="pencut"></div>
            <div class="lead"></div>
        </div>
	</body>
</html>