I am trying to make concave shaped top and bottom borders around a <div> like this:
My current CSS:
.div:after {
content:'';
position:absolute;
left:-600%;
width:1300%;
padding-bottom:1300%;
top:80%;
background:none;
border-radius:50%;
box-shadow: 0px 0px 0px 20px #f2f2f2;
z-index:-1;
}
But it only works only on the bottom border and sometimes disappears on mobile devices.
Here is JS Fiddle.
You can use :before and :after pseudo elements to draw this shape.
.div {
position: relative;
overflow: hidden;
padding: 50px 0;
}
.div-inner {
position: relative;
background: black;
height: 120px;
}
.div-inner:before,
.div-inner:after {
box-shadow: 0 0 0 80px #000;
border-radius: 100%;
position: absolute;
height: 150px; /* You can change height to increase or decrease concave radius */
content: '';
right: -20%;
left: -20%;
top: 100%;
}
.div-inner:after {
bottom: 100%;
top: auto;
}
<div class="div">
<div class="div-inner"></div>
</div>
Related
I've created a triangle overlay over an image using borders.
HTML and CSS
.hp-product-item {
position: relative;
}
.hp-product-item img {
max-width: 500px;
width: 100%;
}
.hero-overlay {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 500px;
border-color: transparent transparent transparent #F9FAFB;
}
.hero-text {
position: absolute;
bottom: 10px;
left: 10px;
}
<div class="hp-product-item">
<img src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=1350&q=80">
<div class="hp-product-text">
<div class="hero-overlay"></div>
<div class="hero-text">
<h2>Test</h2>
<p>Testing this</p>
</div>
</div>
</div>
This works great, my only problem is responsiveness. So as the image gets smaller due to the 100% width the border becomes too big it overlaps and causes the layout to break. Now I could change the border-width with media queries but is there a better way to do this?
I've also created a fiddle
Use vw and vh instead of px so the units are relative to viewport size.
Just short example fiddle
You can use linear gradients instead of border that property supports percentage units, you will have to move outside your overlay... just like the example
FIDDLE
.hp-product-item {
position: relative;
display: inline-block;
}
.hp-product-item img {
max-width:500px;
width:100%;
}
.hero-overlay{
position:absolute;
bottom:0;
width: 100%;
height: 100%;
background: linear-gradient(19deg, #ffffff 25%, rgba(0,0,0,0) 25%);
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
Maybe you can try to set white background and to rotate class .hero-overlay?
Fiddle example
.hp-product-item {
max-width: 500px;
overflow: hidden;
position: relative;
}
.hp-product-item img {
width:100%;
}
.hero-overlay {
background-color: #f9fafb;
bottom: -230px;
height: 250px;
left: -100px;
position: absolute;
transform: rotate(15deg);
width: 1000px;
}
.hero-text {
position: absolute;
bottom:10px;
left:10px;
}
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 5 years ago.
Why top:0 with position:absolute not working here?
I want to mention that in this condition I don't have control on any other element other than .heatmap
body {
position: relative;
margin: 0;
padding: 0
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
You have encountered collapsing margins.
heatmap is positioned with respect to the nearest ancestor which has position that is not static. This is the body element.
The first child of the body has a margin-top.
That margin collapses through the top of the body and pushes the body element down away from the viewport edge.
You can see this by applying an outline to the body element.
body {
position: relative;
margin: 0;
padding: 0;
outline: solid pink 10px;
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
To avoid this, prevent the margins from collapsing. This is most easily done by using padding on the body instead of margin on the heatmap.
body {
position: relative;
margin: 0;
padding: 107px 0 0 0;
outline: solid pink 10px;
}
.section1 {
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
You just remove position: relative from body, it will work
body {
margin: 0;
padding: 0
}
.section1 {
margin-top: 107px;
border: 1px solid green
}
.heatmap {
z-index: 2147483642;
top: 0px;
left: 0px;
position: absolute;
width: 1425px;
height: 1110px;
opacity: 0.7;
background: red
}
<div class="section1">something</div>
<div class="heatmap">hamara heatmap</div>
Just give padding-top: 1px; to body and it will work fine;
The problem was margin given to section1 which cause collapsing margin
See this link:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.
How do I place the adInfoBox1 at the bottom of the container?
Take a look at this: http://jsfiddle.net/snowman/hxXJh/
Please note that the container will not have a fixed height.
You can use position: absolute.
.container
{
height: 400px;
position: relative;
}
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 457px;
background-color: green;
}
.adRegularList .categoryList {
bottom: 0;
height: 16px;
position: absolute;
}
See a working example here: http://jsfiddle.net/hxXJh/5/
I'd suggest:
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0; /* attaches the element to the bottom */
left: 0; /* attaches the element to the left-side */
right: 0; /* attaches the element to the right-side */
background-color : green;
}
The above will give the .adInfoBox 100% width, implicitly. This can be adjusted by removing, or amending, the right or left declarations. I removed the float because using position: absolute; will take the element out of the document flow anyway.
JS Fiddle demo.
Simple tricky solution. Div2 will be at the bottom of containerDiv.
<div id="containerDiv">
<div id="div1" style="heigth:90%;"></div>
<div id="div2">Content here...</div>
</div>
change the css of adInfoBox1 to:
.adInfoBox1 {
float: left;
padding: 5px 5px 5px 10px;
position: absolute;
width: 457px;
background-color : green;
bottom: 0;
}