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/
Related
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 4 years ago.
I can't seem to figure out how to put corner borders around responsive text.
Screenshot of what I'm trying to achieve using green corners:
Here is the domain of where the text resides.
div {
position: relative;
width: 380px;
height: 0px;
margin: 6px;
}
div:after {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
top: -5px;
right: -5px;
border-top: 4px solid green;
border-right: 4px solid green;
}
a p:before {
display: block;
content: "";
width: 75px;
height: 75px;
position: absolute;
bottom: -70px;
left: -6px;
border-bottom: 4px solid green;
border-left: 4px solid green;
}
h1 {
display: inline-block;
position: relative;
padding: 10px;
}
h1:before,
h1:after {
height: 14px;
width: 14px;
position: absolute;
content: '';
}
h1:before {
right: 0;
top: 0;
border-right: 3px solid #9b59b6;
border-top: 3px solid #9b59b6;
}
h1:after {
left: 0;
bottom: 0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}
<h1>TEXT</h1>
Absolute positioning and height & width of before and after are the key.
Change a p:before to div:before and that should get you on the right path.
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.
I want to create a div with an image and text in it that looks like this.
I've managed to get something that looks like this here:
JSFiddle of pointed div
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
margin: 10px;
}
.triangle-down:before {
border-top: 20px solid red;
border-left: 101px solid transparent;
border-right: 101px solid transparent;
content: "";
height: 0;
left: -1px;
position: absolute;
top: 127px;
width: 0;
}
.triangle-down:after {
border-top: 20px solid white;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 125px;
width: 0;
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
The issues I have are:
(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.
(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow
Here is a version using transform: rotate
/*Down pointing*/
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
position: relative;
margin: 10px;
z-index: 1
}
.triangle-down:before,
.triangle-down:after {
border-bottom: 2px solid red;
background: white;
content: '';
height: 50px;
left: 5px;
position: absolute;
top: 98px;
width: 54%;
transform: rotate(22deg);
z-index: 0;
}
.triangle-down:after {
left: auto;
right: 5px;
transform: rotate(-22deg);
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
I have added a fiddle with the following code. I am trying to make an orange triangle with borders, but the border is showing jagged in Chrome. Does anyone have any insight? I have added the fiddle below. In a comment
<div class="slideshow-overlay-wrapper cssNip">
</div>
.cssNip {
padding-bottom: 50px;
position: relative;
}
.cssNip:before {
border-left: 1000px solid #fff;
border-right: 75px solid transparent;
right: 50%;
}
.cssNip:after {
border-left: 75px solid transparent;
border-right: 1000px solid #fff;
left: 50%;
}
.cssNip:after, .cssNip:before {
border-bottom: 50px solid #fff;
bottom: 0;
content: "";
position: absolute;
width: 50%;
z-index: 100;
}
.slideshow-overlay-wrapper {
display: table;
width: 100%;
table-layout: fixed;
border: none;
background-color: #cb751b;
margin-top: -1px;
padding-top: 12px;
}
.cssNip:after, .cssNip:before {
border-bottom: 50px solid #fff;
bottom: 0;
content: "";
position: absolute;
width: 50%;
z-index: 100;
transform:scale(.99999);
}
This worked fools. Thanks for the help.
I'm creating a site where I need both of these styles on the same button. I need a radius on the left hand side with the right hand side being an arrow. I've tried a few things. example the old fashioned background image with it aligned right for the arrow. Adding the web-kit radius to the button which didn't work out to good.
In the past I'd create the button as a back ground image. But with CSS3 and a bit of magic I'm sure there's a much better way to achieve this?
Anyone got a cleaner solution to the problem? I've had a google with a few coffee's But nothing quite does what I'm trying to do.
-I'm using bootstrap 2.3 has a framework so this would need to work on as many browsers as possible and at multiscreen resolutions.
This is possible through usage of the :before/:after pseudo elements.
jsFiddle here - Basic example
HTML - pretty simple
<div></div>
CSS
div {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:before {
content: '\A';
position: absolute;
right: -20px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
div:after {
content: '\A';
position: absolute;
right: -30px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid blue;
}
I modified code above to achieve the goal you want: exactly the same as on your picture
HTML
<div id="div1"></div>
<div id="div2"></div>
CSS
body {
background: blue;
}
#div1 {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 9;
}
#div1:before {
content: '\A';
position: absolute;
right: -28px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
#div1:after {
content: '\A';
position: absolute;
right: -38px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid white;
}
#div2 {
width: 20px;
height: 50px;
background: white;
left: 196;
top: 8;
position: absolute;
}