Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me?
there is the code of the shape divider:
.custom-shape-divider-bottom-1640714253 {
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1640714253 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 115px;
}
.custom-shape-divider-bottom-1640714253 .shape-fill {
fill: #FF2E63;
}
<div class="custom-shape-divider-bottom-1640714253" id="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
Here are four examples. The first two uses an SVG as background or positioned in the bottom of the <div>. They both have a white triangle to cut off the background color. This will leave a solid background.
The third example is using CSS clip-path to cut off the triangle in the bottom. In this example the height of the triangle is a bit hard to calculate. But one advantage is that the triangle is transparent.
The fourth example looks a lot like yours. In this example I translate the <path> -1 unit on the y-axis, so that the upper border of the SVG is not "antialiasing".
.photocollage {
height: 200px;
background: #FF2E63 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMCI+PHBhdGggZD0iTSAwIDAgTCAxMjAwIDEyMCBMIDAgMTIwIFoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 101% auto;
}
.photocollage2 {
background: #FF2E63;
position: relative;
}
.photocollage2 svg {
position: absolute;
bottom: 0;
}
.photocollage3 {
height: 200px;
background: #FF2E63;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
}
.photocollage4 {
height: 160px;
background: #FF2E63;
}
<p>Example 1</p>
<div class="photocollage"></div>
<p>Example 2</p>
<div class="photocollage2">
<div style="height: 200px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path d="M 0 0 L 1200 120 L 0 120 Z" fill="#FFF"/>
</svg>
</div>
<p>Example 3</p>
<div class="photocollage3"></div>
<p>Example 4</p>
<div class="photocollage4"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path transform="translate(0 -1)" d="M 0 0 L 1200 0 L 1200 120 L 0 1 Z" fill="#FF2E63"/>
</svg>
Try giving the svg a very small negative margin-top, one or two pixels should do the trick.
It should pull the shape up ever so slightly to bridge the gap.
I want to crop / change the border of a div based on a svg (assume the blue pencil in the drawing is the svg).
I tried to use mask but it's not what I want because I also want to display the SVG.
Of course transparency is key because the background below the div is different.
You could do this using CSS and SVG clip paths, although it's hard to work with and has low browser support. Below is an example to get you started.
.clipped-card {
-webkit-clip-path: url(#curved-bottom);
clip-path: url(#curved-bottom);
background: black;
color: white;
position: relative;
padding-top: 100%;
}
.clipped-card-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.clipped-card svg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0">
<defs>
<clipPath id="curved-bottom" clipPathUnits="objectBoundingBox">
<path d="M0 0H1V.9C.92.83.73.74.5.9A.6.6 90 00.49.91C.27 1.07.07.98 0 .91V0Z" />
</clipPath>
</defs>
</svg>
<div class="clipped-card">
<div class="clipped-card-content">
My content
</div>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 24"><path d="M0 10v5c7 7 27 16 49 0a60 60 0 001-1c23-16 42-7 50 0v1-5-1C92 2 73-7 50 9a60 60 0 00-1 1C27 26 7 17 0 10z" fill="red"/></svg>
</div>
I'm trying to add a new element after an svg path, that will have the same shape and path as his parent using :after or :before
I created a g tag wrapping the path i want to target calling it by the class eyes
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 641.27 1107.33">
<defs>
<style>
.cls-30,.cls-32{stroke:#000;}.cls-30,.cls-32{stroke-miterlimit:10;}.cls-32{stroke-width:2px;}.cls-32{fill:#fff79a;}
</style>
</defs>
<g class="eyes" id="GLOBE_GAUCHE" data-name="GLOBE GAUCHE">
<path class="cls-32" d="M298.37,210.19a39.52,39.52,0,0,0-18.46,7.23c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.45,39.45,0,0,0-.5-15.94C348.79,229.24,337.62,205.53,298.37,210.19Z" transform="translate(-63.9 148.72)">
</path>
</g>
<g class="pupilles" id="PUPILLE_GAUCHE" data-name="PUPILLE GAUCHE">
<path class="cls-30" d="M281.69,266.67s-1.81-13.91,3.65-2.52c3.85-1.57,13.76-7.9,7.61.2,1.37,1.6,8.89,2.93-.84,4.93.48,2.24,6,10-3.41,4.87-1.9-.39-4,9.57-5.66-.92C282.63,271.22,272.29,270.37,281.69,266.67Z" transform="translate(-63.9 148.72)">
</path>
</g>
<g class="eyes" id="GLOBE_DROIT" data-name="GLOBE DROIT">
<path class="cls-32" d="M434.11,207.73A39.52,39.52,0,0,0,415.65,215c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.63,39.63,0,0,0-.5-15.94C484.53,226.78,473.35,203.07,434.11,207.73Z" transform="translate(-63.9 148.72)">
</path>
</g>
<g class="pupilles" id="PUPILLE_DROIT" data-name="PUPILLE DROIT">
<path class="cls-30" d="M450.29,260.72s8.59-12.71-4.63-4.78c-1.06-1.35-5-7.78-5.28-.32-1,2.91-15.65,1.23-1.35,7.42.61,1.7-5.82,5.89,2.28,4.74.91,1.9,2.19,6.85,5.92.87C450.32,265.93,457.76,268.9,450.29,260.72Z" transform="translate(-63.9 148.72)">
</path>
</g>
</svg>
</div>
Then in the css i'm tryin to insert a new element :after the path of the eyes class
html, body {
height: 100%;
margin: 0;
}
#svg-container {
background-color: #f1f1f1;
height: 100%;
}
svg {
display: block;
margin: auto;
height: 100%;
}
.eyes path::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #d9a12a;
}
I can see in the console that it create the :after element at the right position, however it doesn't seem to show and the number of pixels are not showing (not even 0)
Is there a way to implement this ?
I am trying to make .main-div like this image
.main-div {
width: 100px;
height: 100px;
background-color: Red;
border-radius: 30px/20px;
}
<div class="main-div"></div>
My JSFiddle is here.
You can do a trick using a pseudo element and achieve that shape
body {
background: lightgray;
}
.main-div {
position: relative;
display: inline-block;
width: 110px;
height: 100px;
background-color: red;
border-radius: 30%/50%;
background: url(https://i.stack.imgur.com/CWoXa.png) center center no-repeat;
background-size: 110px 110px;
}
.main-div::after {
content: '';
position: absolute;
left: 5px;
top: -5px;
width: 100px;
height: 110px;
background: inherit;
background-size: inherit;
border-radius: 50%/30%;
}
.main-div+.main-div {
background: gray;
}
<div class="main-div"></div>
<div class="main-div"></div>
As Justinas remarked in their answer, the border of your example image does not look like it can be recreated with border-radius alone. This is because the outline is not an ellipse.
It is possible to do this, with good browser support, using SVG as follows.
/* set size of and center SVG */
svg {
display: block;
width: 200px;
height: 200px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</svg>
This uses clipping in SVG with the clipPath element. You can define any path to use for the clipping. I have used four Bezier curves here. You can tweak where the control points are, or change this to use something entirely different if you wish.
An extra bonus of this approach is that it is now easy to apply other (advanced) filters, for example blurring the image or applying a drop shadow.
/* set size of and center SVG */
svg {
display: block;
width: 204px;
height: 204px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
<filter id="dropshadow" x="-30%" y="-30%"
width="160%" height="160%"
color-interpolation-filters="sRGB">
<!-- define color of shadow here -->
<feComponentTransfer in="SourceAlpha">
<feFuncR type="linear" slope="0"
intercept="0.518"></feFuncR>
<feFuncG type="linear" slope="0"
intercept="0.698"></feFuncG>
<feFuncB type="linear" slope="0"
intercept="0.867"></feFuncB>
</feComponentTransfer>
<!-- define blur of shadow here -->
<feGaussianBlur stdDeviation="2" />
<!-- we can offset the shadow -->
<feOffset result="shadow" dx="1" dy="1" />
<!-- put shadow below original content -->
<feBlend in="SourceGraphic"
in2="shadow" mode="normal" />
</filter>
</defs>
<g transform="translate(2, 2)"
filter="url(#dropshadow)">
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</g>
</svg>
Your image radius does not look like standard CSS border radius. If yes, than you need to use image preprocessing (in back-end side, e.g. GD or stand-alone tool like Photoshop) or use Clipping Mask with limited support. Using border radius you can have similar effect.
.main-div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 40%;
overflow: hidden;
position: relative;
}
.main-div img {
width: 100%;
position: absolute;
left: -50px;
top: -50px;
margin-top: 50%;
margin-left: 50%;
}
<div class="main-div">
<img src="http://lorempixel.com/200/200/"/>
</div>
Add this style. You can change border-radius as per your requirements:
div {
border: 2px solid #a1a1a1;
padding: 10px 15px; `enter code here`
background: #dddddd;
width: 100px;
border-radius: 55px;
}
.element {
border-radius: 50px;
overflow: hidden;
}
<img src="https://image.ibb.co/irvmO5/html5.png" alt="html5" border="0" class="element"><br /><a target='_blank' href='https://imgbb.com/'>Rounded rectangle clip mask</a>
I am trying to implement the
http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
to my needs
The problem is that I want the button Ive created to change the style of a div outside the figure tag. I can not find a way to do that.
All I need is by hovering over the .my-1 button, to display the .y1 div
Here is the code so far.
<style type="text/css">
#burj-imagemap {
overflow: hidden;
padding-bottom: 75%;
vertical-align: middle;
width: 100%;
}
#burj-imagemap svg {
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.my-1:hover {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;
}
.my-1 {cursor: pointer;}
.y1 {
display: none;
}
.my-1:hover .y1 {
display: block;
background-color: #F00;
height: 250px;
width: 250px;
z-index:1000;
}
</style>
<figure id="burj-imagemap">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 808" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" height="808" width="1200">
</image>
<a class="my-1" >
<g>
<defs>
<polygon id="SVGID_1_" points="322,131 62,240 79,346 274,250 412,405 501,250"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<image overflow="visible" width="1200" height="808" xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" transform="matrix(1 0 0 1 -33.5 -301)">
</image>
</g>
</g></a>
</svg>
</figure>
<div class="y1">Hi!</div>
any ideas?
You could include an event handler in the svg like this..
<g clip-path="url(#SVGID_2_)" onmouseover="document.getElementById('y1').style['display'] = 'inline';">
<div id="y1" class="y1">Hi!</div>
fiddle here http://jsfiddle.net/9mDur/