SVG that scales with text width - html

I'm trying to build a simple banner in SVG that will scale width as the text inside it is filled.
Here is my current code:
#container {
height: 60px;
position: relative;
}
#container > svg {
width: 100%;
height: 100%;
}
#container > p {
position: absolute;
left: 0;
margin: 5% 10%;
text-align: center;
color: white;
}
And the HTML:
<div id="container">
<span>Strawberry Mango</span>
<svg viewBox="0 0 10 10" preserveAspectRatio="none">
<path d="M 0,0 L 10,0 9.5,5 10,10 0,10 0.5,5 z" fill="black"></path>
<path d="M 0.25,0.75 L 9.75,0.75 9.3,5 9.75,9.25 0.25,9.25 0.75,5 z" fill="orange"</path>
</svg>
</div>
Which produces a banner that is 100% width of the parent element, but I would like it to scale to the size of the p tag if it is possible.
Here is a fiddle of it


Try giving #container display:inline-block so it shrinks to its children, then make the svg have position:absolute instead of the paragraph and also give it z-index:-1; to put it behind the paragraph. This is because your SVG element was defaulting to 300px, which you don't want to happen
Demo

Related

Position SVG at bottom of any screen

I am trying to position a SVG at bottom in any screen, but I can't do it in screens without scrollbar.
I tried some changes but nothing seems work.
Here is CSS what I use:
.custom-shape-divider-bottom-1652813835 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
z-index: -1;
}
.custom-shape-divider-bottom-1652813835 svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 600px;
}
.custom-shape-divider-bottom-1652813835 .shape-fill {
fill: var(--svg-color);
}
And there is my Html:
<div style="position: relative;">
<div class="custom-shape-divider-bottom-1652813835">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
When I don't have scroll this is what happens: https://i.stack.imgur.com/Kafst.png
When I have scroll the SVG fits at the bottom: https://i.stack.imgur.com/6GFDP.png
I look with element inspector and that white space is not found inside my html document.
Any sugestions please? Thanks for ur time.
EDIT:
This whats happens when delete the position relative in that div: https://i.stack.imgur.com/pRjMt.png
EDIT 2:
Added JSFiddle:
https://jsfiddle.net/bue4m39t/1/

to move an element out of flow and position it depending of the viewport use: position: fixed;
svg {
position: fixed;
bottom: 0;
}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>

Try this:
html, body {height: 100vh;}

How to overlap image half way with container like example shown

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>

SVG to make a wave effect border and allow it to stretch horizontally only

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.

How to absolutely position svgs to top and bottom of parent within an inline block in CSS

I have an inline block so that elements sizes are dynamically width-matched constrained on the height of the elements.
How can I make the bottom element positioned at the bottom and the top element still be dynamically sized and positioned from the top?
Ideally I want to just say position: absolute; bottom: 0 on the bottom element, and make the container have height: 100%, but doing so makes it so that the top element has size 0 (since having position absolute doesn't count for the container size when calculating from the bottom element?).
Links to relevant content on how to better understand positioning and dynamic sizing of elements would be greatly appreciated, because I can't seem to wrap my head around it.
.container {
display: inline-block;
background: pink;
}
.top {
max-height: 50vh;
min-width: 100%;
}
.bottom {
height: 100%;
max-height: 50vh;
min-width: 100%;
}
<div class="container">
<svg class="top" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<polygon points="0,0 100,0 100,100 0,100" fill="none" stroke="black" stroke-width="1"/>
</svg>
<svg class="bottom" viewBox="0 0 100 200" preserveAspectRatio="xMinYMin meet">
<polygon points="0,0 100,0 100,200 0,200" fill="none" stroke="black" stroke-width="1"/>
</svg>
</div>

Try to put position: relative; on your inlined element, i.e.
.container {
display: inline-block;
background: pink;
width: 300px;
height: 300px;
position: relative;
}
.top {
position: absolute;
top: 0;
max-height: 50vh;
min-width: 100%;
}
.bottom {
position: absolute;
bottom: 0;
height: 100%;
max-height: 50vh;
min-width: 100%;
}
A page element with relative positioning gives you the control to
absolutely position children elements inside of it.
s. https://css-tricks.com/absolute-positioning-inside-relative-positioning/

I was able to finally figure this out using an display: inline-flex; box as the container. It doesn't allow me to specify an absolute positioning for the children, but it does force the top element and bottom element to be spaced out.
Then the offset from the bottom and top can be specified with padding-bottom: 10; on the bottom element.
<html>
<head>
<style>
.container {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
background: pink;
height: 100%;
}
.top {
min-width: 100%;
}
.bottom {
height: 100%;
max-height: 50vh;
min-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<svg class="top" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<polygon points="0,0 100,0 100,100 0,100" fill="none" stroke="black" stroke-width="1"/>
</svg>
<svg class="bottom" viewBox="0 0 100 200" preserveAspectRatio="xMinYMin meet">
<polygon points="0,0 100,0 100,200 0,200" fill="none" stroke="black" stroke-width="1"/>
</svg>
</div>
</body>
</html>

Adding diagonal borders to bottom/top of div element?

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>