JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<form id="form" method="POST" action="https://suite.websecurify.com/register" spellcheck="false" autocomplete="off">
    <input type="email" name="email" placeholder="Email"/>
    <input type="password" name="password" placeholder="Password"/>
</form>
<div class="triangle">
    向上的三角
</div>
<p></p>
<div class="rightTriangle">
    向右的三角
</div>

CSS

.triangle, .rightTriangle{background-color:#000;width:50px;height:100px;color:#fff;}
.triangle:after{content:'';display:block; border:25px solid transparent; border-bottom:21px solid #fff;border-top:none}

.rightTriangle:after{content:'';display:block;border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-left: 15px solid #999;}