How to add border to a geometric figure in css? - html

Question

How can I add the border to this geometric figure created in css?
I tried this, but it isn't working. the border looks like a square...
https://jsfiddle.net/asngxe77/
HTML:
<div align="center" class="orpos">
<div class="orstyle">
<div class="or">
</div>
</div>
</div>
CSS:
.orpos{
position: relative;
height: 100px;
width: 100px;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
.orstyle{
border: solid 1px #505246;
}
.or {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #272822;
position: relative;
top: -50px;
}
.or:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: #272822;
}

Answer 1

you could still use border, then transform and a gradient:
.orpos {
position: relative;
height: 100px;
width: 100px;
margin: auto;
overflow: hidden;
}
.orstyle {
border: solid 4px #505246;
/* set a background-color and draw the last border in bg */
background: linear-gradient(135deg, #505246 38%, transparent 38%) gold;
width: 60%;
height: 60%;
transform: rotate(45deg);
margin-top: -20%;
}
.or {
transform: rotate(-45deg);
margin-top: 38.5%;
/* to stay away from top border area */
}
/* demo purpose */
.orpos {
display: inline-block;
vertical-align: top;
}
.border1 {
border-width: 1px;
}
.border10 {
border-width: 10px;
}
.border5 {
border-width: 5px;
}
<div align="center" class="orpos">
<div class="orstyle border1">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle border10">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
<div align="center" class="orpos">
<div class="orstyle border5">
<div class="or">
OR
<!-- was text meant to be here ? -->
</div>
</div>
</div>
from code demo on css-tricks website for the diamond square :
#diamond {
margin: 1em;
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
#diamond:before {
content: '';
position: absolute;
height: 80px;
width: 80px;
background: gray;
transform: rotate(45deg);
left: -40px;
top: 10px;
z-index: -1;
}
#diamond:hover:before {
box-shadow: inset 0 0 0 3px green, 0 0 0 3px;
/* more borders border ?*/
border-radius: 4px;
background:white
}
<p>Hover the diamond and see some extra css effects to draw a three color rounded borders</p>
<div id="diamond"></div>