<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.tri {
margin-top: 50px;
}
.plus, .minus {
display: inline-block;
position: relative;
}
.plus {
width: 0px;
height: 0px;
border-style: solid;
border-width: 34px 34px 0 0;
border-color: #076591 transparent transparent transparent;
}
.minus {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 34px 34px;
border-color: transparent transparent #076591 transparent;
left: -36px;
top: 2px;
}
.minus::after {
content: "-";
position: absolute;
right: 6px;
top: 12px;
}
.plus::after {
content: "+";
position: absolute;
bottom: 12px;
left: 6px
}
.plus::after, .minus::after {
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="tri">
<a href="#plus" class="plus"></a>
<a href="#minus" class="minus"></a>
</div>
<script id="jsbin-source-css" type="text/css">.tri {
margin-top: 50px;
}
.plus, .minus {
display: inline-block;
position: relative;
}
.plus {
width: 0px;
height: 0px;
border-style: solid;
border-width: 34px 34px 0 0;
border-color: #076591 transparent transparent transparent;
}
.minus {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 34px 34px;
border-color: transparent transparent #076591 transparent;
left: -36px;
top: 2px;
}
.minus::after {
content: "-";
position: absolute;
right: 6px;
top: 12px;
}
.plus::after {
content: "+";
position: absolute;
bottom: 12px;
left: 6px
}
.plus::after, .minus::after {
font-size: 20px;
color: white;
}</script>
</body>
</html>