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.
Related
I am trying to center an image on to a Hexagon made using CSS.
The code I currently have is:
.img-social {
width: 25px;
height: 25px;
}
.hexagon {
position: relative;
width: 35px;
height: 20.21px;
background-color: #525555;
margin: 10.10px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 17.5px solid transparent;
border-right: 17.5px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 10.10px solid #525555;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 10.10px solid #525555;
}
<li class="img-social-container">
<div class="hexagon"></div>
<a><img class="img-social" src="icons/logo-github.png" alt="github"></a>
</li>
I also want the image to be ontop of the hexagon which is another problem I am having.
Just move it? I'm somewhat sure it's not the best solution, but still.
.img-social {
width: 25px;
height: 25px;
position: relative;
bottom: 32.5px;
left: 5px;
margin: 0;
}
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
I have found the following shape which I want to make responsive:
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
<div id="hexagon">
If I'm changing the values of border-left, border-right or border-top in percentages, it doesn't work.
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>
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/