How I can make following shape with a colored border:
My first try was pure CSS but the attached code makes more an egg shape than a circle:
img {
border: 2px #ff00ff solid;
border-top-left-radius: 60% 50%;
border-bottom-left-radius: 60% 50%;
border-top-right-radius: 50% 20%;
border-bottom-right-radius:50% 20%;
}
<img src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/4e34feee0acdc38a?w=400&h=400" style="width:100%">
Second try, working with SVG isn't supported in Opera and IE and I have no idea how to make borders. The "cut" doesn't work every time.
img {
clip-path: url(#myClip);
}
<svg width="120" height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/>
</clipPath>
</defs>
</svg>
<img src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" style="width:100%">
The simplest solution is probably just to make an SVG.
<svg width="400px" height="400px" viewBox="0 0 1 1"
overflow="visible">
<defs>
<mask id="myMask" x="0" y="0" width="1" height="1"
maskContentUnits="objectBoundingBox" fill="white">
<path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/>
</mask>
</defs>
<image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg"
x="0" y="0" width="1" height="1" mask="url(#myMask)"/>
<use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/>
</svg>
You could use a pseudo element to create something like this:
div {
height: 300px;
width: 300px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s;
}
div:hover {
height: 500px;
width: 500px;
}
div:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 15%;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/300/300);
background-size: 100% 100%;
border-radius: 50%;
border: 10px solid tomato;
}
div:after {
content: "";
position: absolute;
right: 0;
top: 15%;
height: 70%;
background: tomato;
width: 10px;
}
<div></div>
Related
I have one issue.
My svg backgound isn't full. Part of the background was gone.
It's must look like this
section {
padding: 20px;
width: 100%;
}
div {
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: cover;
}
<section>
<div></div>
</section>
I tried use background-size: 100% 100%;, some variation of background-position. But it didn't help me.
Code of svg file.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 32" enable-background="new 0 0 1000 32" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="484.8" y2="0"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="484.8" y1="0" x2="500" y2="32"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="500" y1="32" x2="1000" y2="32"/>
</svg>
Some really creative solution, but it works. I used before and after to fill up the empty space with borders. When the image gets too small.
section {
padding: 20px;
width: 100%;
}
div {
position: relative;
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
div:before{
content: "";
position: absolute;
border-top: 1px solid #8e8e8e;
width: 40%;
left: 0;
top: 0;
}
div:after{
content: "";
position: absolute;
border-bottom: 1px solid #8e8e8e;
width: 40%;
right: 0;
bottom: 0;
}
#media (max-width:937px) {
div:after{
display: none;
}
div:before{
display:none;
}
}
<section>
<div></div>
</section>
I have an SVG overlay that is a shape with a hole punched out of it. Is there anyway I can set it so the overlay is effectively pinned to the bottom right corner and keeps the circle in proportionately the same position, whilst expanding the rest of the SVG to fill the remaining area of the container?
I've managed to get the SVG to (seemingly) stay in the bottom right corner, but I can't work out how to get it to fill the rest of the container? I'll need to do this without contorting the circle shape obviously.
codepen: https://codepen.io/emilychews/pen/KQmZEd
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
}
<div id="box">
<svg id="overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.71 170.5"><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2-2"><path d="M0,0V170.5H232.71V0ZM187.37,148.19a23,23,0,1,1,23-23h0A23,23,0,0,1,187.37,148.19Z" transform="translate(0 0)" fill="#015668"/></g></g></svg>
</div>
I would consider another idea to create the hole using mask where you can easily control the circle position and size. Then the trick is to make the whole svg to overflow with big width/height to always cover the div and to keep the same size of the circle:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:1000px;
height:1000px;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 400" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="20" cx="370" cy="370" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=400 mask="url(#hole)" fill="green" />
</svg>
</div>
If you want the circle to be resized on width change you can try this:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:100%;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 10000" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="80" cx="300" cy="9900" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="green" />
</svg>
</div>
And you can easily have the opacity you needed in the previous question:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:100%;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 10000" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="80" cx="300" cy="9900" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="rgba(0,0,255,0.5)" />
</svg>
</div>
Here's how I would do it. I'll provide step-by-step instructions so it's easier to follow the "magic". :)
The idea is to use a simple square SVG with a viewBox width and height of 100x100. Then we can position the circle that will be our future hole in the bottom right of the viewBox.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
Then we use preserveAspectRatio="xMaxYMax meet" to tell the renderer that we want the SVG contents in the bottom right corner.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<rect x="0" y="0" width="100" height="100" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
The next step is make the rectangle wider and start off the left of the viewBox so that it fills the area of the viewport that is to the left of the SVG. We'll do that by making it start at x="-900" and be width="1000". That means it extends to the left 9X more than the (100 wide) viewBox. That should make it more than wide enough to cater for even the most humongous monitors around.
We will also do the same thing in the vertical direction. Just in case the viewport ever gets tall and skinny. That can happen if you resize the window so that it has narrow width.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
Finally, we convert this to a mask and apply it to a rectangle that fills the viewport the same way.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<defs>
<mask id="mymask">
<rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</mask>
</defs>
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
</svg>
</div>
For a final test. Let's make the "box" bigger to check it is properly responsive. We'll make it 400px high this time. Try resizing the browser windo to check the responsiveness.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 400px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<defs>
<mask id="mymask">
<rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</mask>
</defs>
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
</svg>
</div>
I've been able to show a video with a text mask, so the video is only showing inside the text. Now, I would like to do the same thing, but instead of using a normal text as a mask, I'd like to use a SVG element as the mask.
.wrapper-video {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.wrapper-video-border {
width: 102%;
height: 102%;
position: absolute;
top: -1%;
left: -1%;
border: 10px solid #fff;
}
.project-initial {
position:relative;
margin-right: 0;
font-size: 500px;
letter-spacing: -10px;
font-weight: 900;
font-family: 'Arial', sans-serif;
width: 720px;
height: 405px;
overflow: hidden;
}
.project-initial .mask__shape {
fill: white;
}
.project-initial .shape--fill {
fill: #fff;
}
.project-initial .text--transparent {
fill: transparent;
}
.project-initial .box-with-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.project-initial .text-fill {
position: absolute;
width: 720px;
height: 405px;
margin: auto;
}
.project-initial .video {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.project-initial .svg-defs {
width: 0;
height: 0;
}
.project-initial .svg-inverted-mask {
position: absolute;
width: 100%;
height: 100%;
}
<div class="wrapper-video">
<div class="project-initial">
<svg viewBox="0 0 720 405" class="svg-defs">
<!-- Symbol with text -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
>
13
</text>
</symbol>
<!-- Mask with text -->
<mask id="m-text"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<rect
width="100%"
height="100%"
class="mask__shape">
</rect>
<use xlink:href="#s-text"
class="mask__text"
></use>
</mask>
</svg>
<div class="box-with-text">
<!-- Container for video -->
<div class="text-fill">
<video viewBox="0 0 720 405"
class="video" src="http://tympanus.net/codrops-playground/assets/images/posts/23145/bokeh2.mp4"
autoplay loop
></video>
</div>
<!-- Visible SVG -->
<svg viewBox="0 0 720 405"
class="svg-inverted-mask">
<rect
width="100%"
height="100%"
mask="url(#m-text)"
class="shape--fill"/>
<use xlink:href="#s-text"
class="text--transparent"
></use>
</svg>
</div>
</div>
<div class="wrapper-video-border"></div>
</div>
You can see it working in the JsFiddle above. Now, how could I edit this code to make it work with an SVG element instead of normal text?
Thank you!
Hi i have a HTML polygon, this is my code :
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="assets/img/downarrow.png" alt="" />
</div>
</div>
This produces :
I actually want this the other way around, so that the black section is blue and the blue section is transparent. I cant find a way at all to edit the color of the black section i have even tried changing the bodys bg-color.
Here is my css:
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
Can anyone help? Thanks.
Add fill property to polygon and change the background of svg to transparent.
Have a look at the snippet below (use full screen for better view, ignore placeholder image of arrow):
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: transparent;
}
svg polygon {
fill: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://placehold.it/10x10" alt="" />
</div>
</div>
Hope this helps!
Set the polygon fill to the blue color and set the svg background to black in css:
svg{
background: black;
}
and your svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="#38aae1"/>
</svg>
I'm trying to design a profile image shape just like this
but my code given me the following design
I'm worried about the white space inside the border and the shape here is code
.doctor-profile-photo {
width: 210px;
height: 210px;
border-radius: 60px/140px;
border: 5px solid #000;
box-shadow: 0px 2px 5px #ccc;
}
.doctor-profile-photo img {
width: 100%;
height: 100%;
border-radius: 60px/140px;
}
<div class="doctor-profile-photo">
<img src="http://weknowyourdreams.com/images/bird/bird-09.jpg" alt="">
</div>
This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want.
<style>
#pic {
position: relative;
width: 130px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#pic:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="pic"></div>
Here's a useful link : https://css-tricks.com/examples/ShapesOfCSS/
SVg path and pattern
You can create your shape with a single path. I used a quadratic Bezier curve.
Path MDN
I added an image to the svg using a image tag and pattern tag.
This is then using inside the path with this fill="url(#img1)".
The defs tag is used to hide elements we are not using directly.
<svg viewBox="0 0 100 100" width="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="400">
<image xlink:href="http://lorempixel.com/400/400/" x="0" y="0" width="100px" height="100px" />
</pattern>
</defs>
<path d="M15,15 Q 50,0 85,18 100,50 85,85 50,100 18,85 0,50 15,15Z" fill="url(#img1)" />
</svg>