I'm trying to create this view but I'm not sure how to get the image to overlap half way with the black background. I've got an svg with the full wide graphic of the car and line where the line breaks in color.
I'm using Bulma as a framework. How would I get the image to overlap a black container as well as the white container?
Here's an example of what I've got now: https://codesandbox.io/s/bulma-autocomplete-forked-kdu4h?file=/src/index.js
To make the img responsive you want it to keep its aspect ratio while filling the same width as the black element but you want it to be translated up enough that the break between the white and the black line always stays at the top of the container.
This snippet does that by having the img as a child of the black element and the same width as it but translated upwards by just the right % of its height that the black line starts just above the black element. This is almost at 50% of its height, actually just very slightly more.
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
div {
width: 100vw;
height: 50vh;
margin: 0;
padding: 0;
position: relative;
top: 40%; /* just for this demo */
background-color: black;
}
img {
width: 100%;
height: auto;
transform: translateY(-52.5%);
margin: 0;
padding: 0;
position: absolute;
}
<div>
<img src="https://i.stack.imgur.com/mhA4r.png" />
</div>
You could have a svg wave with 2 colors like so
body {
background-color: teal;
}
<svg id="wave" width="740" height="110" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
<path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
</svg>
Then put that down of you top container
.block {
height: 150px;
width: 100%;
}
.black {
background-color: black;
position: relative;
}
#wave {
float:left;
transform: translatey(-50%);
}
<div class="block black"></div>
<svg id="wave" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
<path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
</svg>
<div class="block white"></div>
I have used https://getwaves.io/ to create a wave SVG.
So I have added this svg to my header element:
.page{
height:400px;
width:100%;
background: green;
}
.pls-sticky-header{
position: relative;
height: 150px;
background-color: red;
}
.wave{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="page">
<div class="pls-sticky-header">
<svg viewBox="0 0 1440 200" class="wave">
<path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</div>
<div class="content"></div>
</div>
```
Currently as the window gets larger in size - waves get more space in height - but I don't want such behavior.
I want to make waves get 30% of the header in height, and 100% of width (make them stretch only horizontally), but I'm struggling with it.
Maybe there is an option to make such border for a DIV vlock if it not possible to achieve using SVG.
Simply add preserveAspectRatio="none"
.page {
height: 400px;
width: 100%;
background: green;
}
.pls-sticky-header {
position: relative;
height: 150px;
background-color: red;
}
.wave {
position: absolute;
bottom: 0;
height:30%;
left: 0;
width: 100%;
}
<div class="page">
<div class="pls-sticky-header">
<svg viewBox="0 0 1440 200" class="wave" preserveAspectRatio="none">
<path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</div>
<div class="content"></div>
You can give a height attribute to the svg. Right now it is modifying the height to match the width. Don't use percentages for the height. because it will change with screen size.
I have included a SVG for polygon and made necessary positioning.It works fine on firefox but the positioning changes on other browsers.I have attached the screenshots in both firefox and Chrome respectively.Why is this happening?
svg{
position: absolute;
z-index: 1;
left: 17%;
top: -23%;
}
.circle {
background: #b7a3a3;
height: 600px;
width: 600px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
<div class="flex-auto flex items-center justify-center w-100">
<div class="w-100">
<svg class="w-100 white debug-grid mb4 db"viewBox="0 0 1000 1000" stroke="#fff" fill="none" stroke-width="50"
id="js-svg">
<polygon id="js-polygon" points="601.4282075197532,484.74767078498866 522.9616144951742,592.7476707849887 396,634 269.03838550482584,592.7476707849887 190.57179248024684,484.74767078498866 190.5717924802468,351.2523292150114 269.0383855048258,243.25232921501137 395.99999999999994,202 522.9616144951741,243.25232921501132 601.4282075197532,351.2523292150113" />
</svg>
</div>
</div>
<div class="circle">
</div>
You've got some issues stemming from the makeup of that svg. Your svg has a 461x468 unit polygon inside of a 1000x1000 unit viewbox and it isn't even centered.
It looks like what you want is a decagon centered inside of a circle. After normalizing your svg polygon the css gets a lot easier to deal with because you can just center it without using magic numbers.
To normalize the polygon, I took the points and subtracted the smallest x coordinate from all x coordinates, did the same for the y coordinates. Then add half of the stroke width to all coordinates. The viewbox then needs to fit the largest coordinates plus half of the stroke width.
I've absolutely positioned the svg inside of the circle to center it. The circle is set to height:0 and padding-top:100% to maintain a 1:1 aspect ratio.
If you want to use the bootstrap positioning and establish a 600px width, apply those styles to a parent element.
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
}
.circle {
background: #b7a3a3;
height: 0px;
padding-top: 100%;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
<div class="circle">
<svg viewBox="0 0 461 486" stroke="#fff" fill="none" stroke-width="50" id="js-svg">
<polygon id="js-polygon" points="435.856415039507,309.747670784988
357.389822014928,417.747670784988
230.428207519754,459
103.466593024579,417.747670784988
25,309.747670784988
25,176.252329215011
103.466593024579,68.252329215011
230.428207519753,27
357.389822014928,68.252329215011
435.856415039507,176.252329215011" />
</svg>
</div>
So, how do you make a div that's shaped like the bottom-left quarter of an ellipse in CSS3?
CSS3 supports rounded corners, but there is no obvious way to make a div shaped like a quarter of an ellipse.
The height of the div is supposed to be 50px, and the width is supposed to be 25% of the screen.
To start, the shape you're describing might not always be an ellipse. Depending on the screen size, the 25% width might result in a circle.
That said, here's a simple quarter-ellipse with just a few lines of CSS. The important CSS property being the border-bottom-left-radius: 100%.
div {
height: 50px;
width: 25%;
background-color: red;
border-bottom-left-radius: 100%;
}
<div></div>
Maybe simply using border-radius like this :
.box {
height: 50px;
width: 25%;
background: blue;
border-radius: 0 0 0 100%;
}
<div class="box">
</div>
Here is another fancy way using radial-gradient and the ellipse value:
.box {
height: 50px;
width: 25%;
background-image: radial-gradient(ellipse at top right, red 68%, transparent 70%);
}
<div class="box">
</div>
Adding to the other answers who use border radius, here's another alternative using SVG :). Fewer lines of code:
You can set the width and height according to your criteria. This is just a demonstration to show easier way to achieve ellipses using SVG.
There's a predefined ellipse container, you just need to adjust the width and height of the svg container to clip off and make only 1/4th visible.
Here's a demonstration of what the coordinates imply:
You can also make use of viewbox to extract the particular part of the ellipse within the svg:
The prototype of the viewbox attribute is :
viewBox="x y width height"
where x and y are the coordinates of our SVG container as shown in the diagram below from where we need to start, taking the width and height to the right and bottom.
width and height are 100 and 50 since that's the quarter of our ellipse having diameters 200 and 100.
Note- If you don't use viewbox, by default it takes the x and y
coordinates as 0,0 (meaning the origin/ top left corner of the
container) so, it will show the output same as the first quarter
below.
<br>Top left quarter: origin(0,0(top left)) :<br>
<svg height="50" width="100" viewBox="0 0 100 50">
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>
<br>Bottom right quarter: origin(100,50(Center)) :<br>
<svg height="50" width="100" viewBox="100 50 100 50">
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>
<br>Bottom left quarter: origin(0,50(Left edge Center)) :<br>
<svg height="50" width="100" viewBox="0 50 100 50">
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>
<br>Top right quarter: origin(100,0(Upper edge Center)) :<br>
<svg height="50" width="100" viewBox="100 0 100 50">
<ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>
Maybe like this?
#ellipse {
background: red;
width: 200px;
height: 50px;
border-radius: 50%;
position: relative;
}
#ellipse:before {
width: 50%;
left: 50%;
height: 100%;
position: absolute;
background: white;
display: block;
content: '';
}
#ellipse:after {
width: 100%;
top: 50%;
height: 50%;
position: absolute;
background: white;
display: block;
content: '';
}
<div id="ellipse"></div>
If you just want corners with unequal rounding you can actually do this.
div {
background-color: #E0EAF1;
/* percentages allowed as well */
border-radius: 50px 0 0 0 / 20px 0 0 0;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
padding-bottom: 20px;
}
<div>
Text
</div>
I'm looking for the best way to add a diagonal border to the bottom of a div element. Preferably in a way so it would also work responsively.
This image is an example of how I would want it to look:
The dark part is the header of my website and the white part is where the content will start. So the diagonal lines will act like a seperator.
I made a little example but it's not really working yet: http://jsfiddle.net/ckknu2tr/
I'm using 2 different divs with a border, one for the left and one for the right side, code example:
.borderright {
line-height: 0%;
width: 0;
border-top: 50px solid transparent;
border-right: 400px solid white;
position: absolute;
bottom: 0;
right: 0;
}
You could use SVG for this. Below is a short example, which can probably be simplified, I use SVG very rarely and am not that proficient with it.
body {
background-image: url(http://i.imgur.com/XxGffrU.jpg);
background-size: cover;
background-position: center bottom;
margin: 0;
}
#your_div {
position: relative;
top: 100px;
margin-top: 100px;
width: 100%;
height: 100px;
background: white;
}
#back {
position: relative;
top: -99px;
width: 100%;
height: 100px;
}
<div id="your_div">
<svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path>
<path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path>
</svg>
</div>