This question already has an answer here:
How to use css triangle with after pseudo element and lower z-index?
(1 answer)
Closed 5 years ago.
I need to create a page using CSS triangle. My concern is that I can only use :after.
Image
Need CSS for this
HTML:
<div class="logo">
<!--<div class="down"></div>-->
</div>
CSS:
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-
flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
z-index: 10 !important;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: 0 !important;
}
I want logo should be display above the triangle.
Thats because z-index is applied to logo class both the times which is the same class you need to remove z-index from .logo and add -ve z-index to .logo::after.
.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
}
.logo::after {
content: '';
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
/*transform-origin: 0 100%;
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
}
Here is a working link : https://jsfiddle.net/qk5u45Lv/
One more alternative:
HTML:
<div class="logo"><span>i</span></div>
Apply this css:
.logo {
background: #3498db none repeat scroll 0 0;
border-radius: 100%;
box-shadow: 0 5px 0 #2980b9;
height: 100px;
width: 100px;
text-align:center;
position:relative;
}
.logo > span {
color: #fff;
font-family: -moz-fixed;
font-size: 82px;
font-weight: 600;
text-align: center;
text-shadow: 1px 3px 1px #000;
}
.logo::after {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #f00;
bottom: -45px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 0;
z-index: -1;
}
OUPUT:
For more go this link
Hope this will help you!!!
Let me know if there is any query.
Related
I made a curved tab list and everything looks good, but the problem is in some resolutions it break position about one pixel, I really want know why this happen technically? and how can I avoid this?
#tabs ul li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid gray;
border-bottom: none;
border-radius: 10px 10px 0 0;
height: 40px;
position: relative;
line-height: 40px;
top: 5px;
margin: 0 -5px 0 0;
min-width: 100px;
}
.active {
border: 1px solid #0061ff !important;
height: 50px !important;
line-height: 50px !important;
border-bottom: none !important;
top: 0px !important;
}
#tabcontent {
width: 200px;
height: 200px;
}
#tab {
border: 1px solid #0061ff;
margin-top: 75px;
border-radius: 10px;
}
#tabs {
margin-top: -68px;
}
.invRadTab1 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
left: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab2 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
right: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab1 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
right: 2px;
border: 1px solid #0061ff;
border-radius: 0 0 10px 0;
border-top: none;
border-left: none;
position: absolute;
}
.invRadTab2 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
left: 2px;
border: 1px solid #0061ff;
border-radius: 0 10px 0 10px;
border-top: none;
border-right: none;
position: absolute;
}
li.active::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
bottom: -2px;
left: 0;
}
<div id="tab">
<div id="tabs">
<ul>
<li><a>Tab 2</a></li>
<li class="active"><a>Tab 1</a><span class="invRadTab1"><span></span></span><span class="invRadTab2"><span></span></span>
</li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
</ul>
</div>
<div id="tabcontent">
some content
</div>
</div>
If you want to see this problem, you should run this snippet in full page and zoom in or zoom out (for me on 125% and 90%), my screen is 1920 and another machine is 1366, I don't see any problem in 1920 resolution, but see this break in 1366 resolution also in another screens. how can I fix this issue?
How can I do something like the picture below?
I would like to have an extra thick line to all my h1's but am not quite sure of a best practice to do it.
HTML:
<h1>This is Our Work</h1>
CSS:
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
}
h1:after {
content: "";
display: block;
border: 1px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
}
Codepen:
You don't need any pseudo elements in this case.
You can draw multiple background images with css3 linear-gradient() with precisely controlled size and positions:
h1 {
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-repeat: no-repeat;
background-size: 100% 1px, 50px 3px;
background-position: bottom 2px left, bottom 1px center;
}
h1{
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-size: 100% 1px, 50px 3px;
background-repeat: no-repeat;
background-position: bottom 2px left, bottom 1px center;
position: relative;
display: inline-block;
}
<h1>This is Our Work</h1>
You need to add position:relative to the h1 and set margin:0 auto to h1:after
h1 {
border-bottom: 1px solid #0D6CC4;
display: inline-block;
position:relative;
}
h1:after {
content: "";
display: block;
border: 2px solid #0D6CC4;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left:0 ;
bottom:-2px;
margin:0 auto;
}
<h1>This is Our Work</h1>
Try this just with a few tweaks in styling related to position.
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
border: 2px solid black;
width: 50px;
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: -1.5px;
}
<h1>This is Our Work</h1>
used this css
h1:after {
content: "";
display: block;
border: 3px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
bottom: -3px;
}
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
You need to position element :after and :before
.main-title{
text-align: center;
}
.inner-title{
position: relative;
font-size: 24px;
padding: 0 0 15px;
margin: 0 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
h1:before {
position: absolute;
content: '';
width: 150px;
left: 50%;
margin-left: -75px;
height: 1px;
background: blue;
bottom: 0;
}
h1:after {
position: absolute;
content: '';
width: 50px;
left: 50%;
margin-left: -25px;
height: 3px;
background: blue;
bottom: -1px;
}
<div class="main-title" >
<h1 class="inner-title">Sevices</h1>
</div>
Since you don't know how long every h1 tag will be, i suggest you to translate the element to the center of its parent, like in this example: http://codepen.io/anon/pen/jyMzqN
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
position: absolute;
height: 3px;
background-color: black;
width: 50px;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
}
Is it possible to create a shape like this using the CSS border?
I saw some other stack overflow posts regarding making some border modifications, but nothing specifically like this. Can someone point me in the right direction?
Thanks
Based on https://css-tricks.com/examples/ShapesOfCSS/:
#base {
background: red;
display: inline-block;
height: 30px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 200px;
text-align: center;
}
#base:before {
border-bottom: 15px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
}
<div id="base"><span>BACK TO TOP</span></div>
Just modify the width and height for your needs, it is really easy.
You can create this shape using css :before and :after selectors:
#back {
background: #fff;
border:1px solid #333;
display: inline-block;
height: 20px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 120px;
text-align: center;
}
#back:before {
border-bottom: 15px solid #fff;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
z-index:2;
}
#back:after {
border-bottom: 15px solid #333;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -16px;
width: 0 ;
z-index:1;
}
<div id="back"><span>Back to Top</span></div>
Fully adaptive and transparent...
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600');
background-repeat: no-repeat;
background-size: cover;
}
.border-arrow-top {
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 6vh;
text-transform: uppercase;
padding: 0 10vw;
padding-bottom: 2vh;
border: 3px solid white;
border-top: none;
position: relative;
}
.border-arrow-top:before,
.border-arrow-top:after {
content: '';
position: absolute;
top: 0%;
border-top: 3px solid white;
width: 50%;
}
.border-arrow-top:before {
left: 0;
transform-origin: -3px -50%;
/* x-coord: -[size of border] */
transform: skewy(-10deg);
}
.border-arrow-top:after {
right: 0;
transform-origin: calc(100% + 3px) -50%;
/* x-coord: 100% + size of border */
transform: skewy(10deg);
}
<div class="border-arrow-top">
Back to Top
</div>
I had written a tutorial for the same, arrow heads and triangles with CSS which can be read here: http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html.
The trick works on the basis of borders and their colors. The direction in which arrow has to point; border of that side can be 0 and rest of the sides will create the arrow head.
The main role will be of opposite side border; if arrow has to point to top, border-bottom will create the arrow and rest can be transparent and if arrow has to point to bottom, the border-top will be of some color and other will be transparent. Similar is for arrow pointing left and right.
The transparent color will work fine in all browser except IE8 and below; for this you can set the color to the matching background, so that it is not visible.
By customizing the fiddle http://jsfiddle.net/95Xq8/ The given below is the output
Check the fiddle
.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
width: 125px;
height: 50px;
line-height: 50px;
position: relative;
background: #f00;
text-align: center; text-decoration:none; color:#000; display:block;
color:#fff;
}
.arrow-tip {
display: block;
width: 101px;
height: 115px;
margin: 0;
-webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
display: block;
width: 125px;
height: 40px;
position: absolute;
top: -40px;
left: 0px;
overflow: hidden;
}
.arrow-tip-grad {
display: block;
width: 100%;
height: 100%;
background: red;
}
<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
<span class="arrow-tip-container">
<span class="arrow-tip">
<span class="arrow-tip-grad"></span>
</span>
</span>
</a>
</div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I've to create something you see in attached image
right now i am using this as background image
background-image: url("corner.png");
background-size: cover;
and then added text but i know there does exist a css solution for creating this border for this so if someone please help me with this i tried to find but i did not find proper solution
You can also generate it from the below link and use it.
http://apps.eky.hk/css-triangle-generator/
.arrow {
width: 250px;
height: 60px;
position: relative;
background: #333;
}
.arrow:after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
position: absolute;
bottom: -15px;
left:25px;
}
<div class="arrow"></div>
Check this fiddle Hope you refer something like this.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.arrow-down {
width: 200px;
height: 50px;
position: relative;
background: red;
}
.arrow-down:after {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position: absolute;
bottom: -19px;
}
<div class='arrow-down'>fgdfgdfgfd</div>
This will help you.
it will create arrows using css.
https://css-tricks.com/snippets/css/css-triangle/
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.