This is a simple question, I even think someone asked this before, but It never got a real answer.
What I want is to avoid border overlapping, It's that simple. Here's an example:
div{
width: 400px;
height: 150px;
border: 1px solid red;
border-bottom: 7px solid black;
}
You can see that the borders overlap in the corner.
Here's the live example: jsFiddle Example
What I really want to do is to make the bottom border cover the right and left border.
Can someone tell me what can I do here?
You can overlay a pseudo element over your div:
div {
background-color: gold;
border-top: 4px solid #172e4e;
height: 100px;
position: relative;
width: 100px;
}
div::after {
content: "";
position: absolute;
bottom: 0; top: 0px; left: 0; right: 0;
border-right:4px solid orange;
border-left:4px solid orange;
}
Example: http://jsfiddle.net/vpHW5/10/
Related
Does anyone have any pointers on how I can achieve the following 2 effects (red color) using pure CSS?
I am not asking for entire code but if anybody can guide me in proper direction, that would really be great.
Thanks in advance.
For second effect you should create for image's container two pseudo-elements :before and :after with border-radius set to desired value. Element :before you should position to left bottom side of container and the element :after you should position to right bottom side. You should also specify widths for each pseudo-element (for example: 50% and 50%, 60% and 40% etc.).
Code for the second effect:
.image {
position: relative;
width: 350px;
}
img {
display: block;
padding: 0;
margin: 0;
}
.image:before {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 30%;
height: 120px;
position: absolute;
bottom: 0;
left: 0;
border-top-right-radius: 15px;
}
.image:after {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 70%;
height: 120px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 15px;
}
<div class="image">
<img src="http://placehold.it/350x350">
</div>
OK, here is a suggestion for the proper direction.
The lower red panel looks to me like two adjoining rectangles. You need to set the widths appropriately, and then for each rectangle round off one corner using border-radius: a b c d.
The effect looks to me like two of effect number 2. The red one, and then the same in white, possibly with a z-index to make sure that it (partly) covers the other one.
I trust you already know how to make the red translucent, either by using opacity or setting the colour using rgba.
I hope that helps.
You have to use the pseudo elements :after & :before to achieve the bulge in the otherwise straight div.
You may try something like this:
div {
height: 30px;
width: 200px;
background-color: red;
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 0px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
margin: auto;
}
div:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
margin: auto;
}
<div></div>
Since you didn't provide a fiddle so use below solution as a guide. CSS will produces curved edges that you join together to produce desired results.
div.arrow-curved {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.arrow-curved:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
For more reference for CSS shapes: https://css-tricks.com/examples/ShapesOfCSS/
I want to add triangle arrow to right side of image, image have border-radius: 50%
i made it with adding second div for arrow, and moving it to place i want, but how can i make it correctly without using second div.
This how it looks like:
https://jsfiddle.net/kani339/0xeu28q5/1/
HTML:
<img src="https://www.aviary.com/img/photo-landscape.jpg" class="photo">
<div class="arrow"></div>
CSS:
.photo {
border-radius:50%;
width: 200px;
height: 190px;
border: 5px solid #41454f;
}
.arrow {
position:relative;
left:205px;
bottom: 115px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #41454f;
}
I think you're looking for something like pseudo element? By using pseudo element, we can attach additional element to an element. This feature lets you have additional element without writing second <div>.
The example below uses pseudo element :before to the .photo element. But keep in mind that this feature doesn't work with <img> tag, so you need to use your image as background instead. Check out the demo below
.photo {
border-radius:50%;
width: 200px;
height: 190px;
border: 5px solid #41454f;
background: url("https://www.aviary.com/img/photo-landscape.jpg") no-repeat center center / cover;
background-position: initial;
position: relative;
}
.photo::before {
content: "";
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #41454f;
}
<div class="photo"></div>
I'm not sure of a pure CSS solution.
You can do it with jQuery, like this:
$(function() {
$('.photo').after('<div class="arrow"></div>');
});
Here's a demo
Credit to Christopher Harris
I am trying to create an offset border effect. Can this be done with pure css.
These are buttons so will be different sizes and colours.
I use pseudo-element :after to create offset border effect.
body {
background: black;
padding: 30px;
}
div {
background: white;
height: 75px;
width: 175px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div></div>
Update
As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow. Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.
I'm going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you'll see how their box-shadow differs from the one described below).
Note: In my answer I've made the foreground box red instead of white to demonstrate that this 'offset border' does not overlap the initial element. You'll need to change this back to white yourself.
The Left and Bottom Borders
You can achieve the left and bottom borders really easily with box-shadow. You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
}
<div></div>
The Top and Right Borders
You can then use pseudo-elements (::before and ::after) to fill in those extra borders:
body {
background: black;
padding: 30px;
}
div {
background: red;
height: 72px;
width: 192px;
box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white;
position: relative;
}
div::before {
background: white;
content: '';
position: absolute;
height: 1px;
width: 7px;
top: 6px;
right: 100%;
}
div::after {
background: white;
content: '';
position: absolute;
height: 7px;
width: 1px;
top: 100%;
right: 6px;
}
<div></div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 6 years ago.
I'm trying to have a CSS tooltip with white background color and 1px border. How to have a border instead of plain black arrow?
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid black;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
PS: Even if it looks similar to another question, the details of design are very important. For example, there was originally here 3 different answers (now 2 of them deleted), slightly different in design. Even if very little different, their arrow look was a bit less perfect that the current perfect answer! The devil is in the detail!
The goal is here to have a plain white tooltip, with 1px wide border. Even if similar look to some other, it's not a duplicate of other question (speech bubble). Once again details are important to achieve such a sleek look.
One of the solutions would be adding another pseudo element :before which is slightly smaller than :after. It's not the nicest solution ever, but it works perfectly fine for particular cases.
(You may notice that I've also cleaned up your code a little and replaced :after with :before to have proper z-index for both pseudo elements. Let me know if you need further explanation)
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
I'm looking for a proper way to have an effect highlighted in below picture at
the bottom of my box in CSS3.
Getting this effect with shadow will have the problem that the border-radius will decrease if you lower the size of the shadow. Can be solved, but it's quite convoluted.
Your best bet would be to use pseudo elements for this
.test {
width: 300px;
height: 100px;
border: solid 1px green;
border-radius: 10px;
position: relative;
background-color: white;
}
.test:after, .test:before {
content: "";
position: absolute;
border: inherit;
border-radius: inherit;
background-color: white;
height: 50px;
}
.test:after {
left: 6px;
right: 6px;
bottom: -6px;
z-index: -1;
}
.test:before {
left: 14px;
right: 14px;
bottom: -12px;
z-index: -2;
}
<div class="test"></div>
Have tried box-shadow? You could use box-shadows multiple times and control their positions. for example :
box-shadow: 1px 1px 1px #color of your choice, (comma for another shadow) 2px 2px 2px #color of your choice, (and on as much as you want);
you can add another value like 1px 1px 1px 1px black . the fourth represents the size of the shadow.
I hope this helps or if you could be more specific :)