css3 - Draw a top bordered tip with CSS -
i trying draw tip in css.
i have "middle success" far, problem that, depending on div width, tip not in center position.
what want:
my code far:
.logo { color: #000; font-size: 1.4em; text-align: center; padding-top: 1.5em; text-transform: uppercase; position: relative; } .line { height: 1px; overflow: hidden; background: #000; } .line.top, .line.bottom { width: 90%; } .line.top { margin: 0 auto 4px; } .line.bottom { margin: 4px auto 0; } .angle { position: absolute; top: 19px; left: 46%; // think problem here! } .angle .line.left, .angle .line.right { width: 20px; } .angle .line.left { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 7px; } .angle .line.right { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin: -7px; }
<div class="logo"> <div class="angle"> <div class="line left"></div> <div class="line right"></div> </div> <div class="line top"></div> text <div class="line bottom"></div> </div>
how can solve this?
i thought setting .angle width: 30px
, margin: 0 auto
, have position: absolute
, not possible.
ps: less can used.
no need of many elements. use .logo
element , pseudo classes. , use letter-spacing
css property give space between letters. (or use exact font, if know name)
css
.logo { color: #000; font-size: 1.4em; text-align: center; height: 2em; margin-top: 2em; letter-spacing: 1em; text-transform: uppercase; line-height: 2em; position: relative; border-top: 1px solid #000; border-bottom: 1px solid #000; } .logo::after, .logo::before { content:""; border-width: 20px; border-style: solid; position: absolute; left: 50%; bottom: 100%; transform: translatex(-50%); } .logo::after { border-width: 18px; margin-bottom: 1px; border-color: transparent transparent white transparent; } .logo::before { border-color: transparent transparent black transparent; }
Comments
Post a Comment