Draw top-bound tip with CSS
I am trying to draw a tooltip in CSS.
I have "average success", the only problem is that depending on the width of the DIV, the tip is sometimes not in the center position.
What I want:
My code:
.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%; // I think my problem is 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>
MY TEXT
<div class="line bottom"></div>
</div>
How can I solve this?
I thought to set .angle width: 30px
and margin: 0 auto
, but it does position: absolute
, so this is not possible.
Ps: LESS can be used.
source to share
You don't need so many elements. Just use the element .logo
and its pseudo-classes. and use letter-spacing
css property to give space between letters. (or use the exact font if you know the 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;
}
source to share
Nested triangles!
.outer {
border: 40px solid transparent;
border-bottom: 40px solid black;
width: 0;
height: 0;
position: relative;
margin: 0 auto;
}
.inner {
border: 36px solid transparent;
border-bottom: 36px solid white;
width: 0;
height: 0;
position: absolute;
top: -32px;
left: -36px;
}
<div class="outer">
<div class="inner"></div>
</div>
source to share
You can just rotate the div and add a border to it. Then, using z-indexing, position it behind a div with only top and bottom borders while holding your text. It might look something like this:
<!DOCTYPE html>
<html>
<head>
<style>
html{padding: 10px;}
.triangle {
width: 10%;
height: 10%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
border-top: 1px solid black;
border-left: 1px solid black;
position: absolute;
top: 20px;
left: 45%;
}
.textBox {
height: 40px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background: white;
z-index: 2;
text-align: center;
}
</style>
</head>
<body>
<div class="logo">
<div class="triangle"></div>
<div class="textBox">
MY TEXT
</div>
</div>
</body>
</html>
source to share
body{
margin-top:70px;
}
h2{
color:#fff;
text-align:center;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
See a working demo here.
source to share