This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 3 years ago.
I have a simple user profile image, and a green state indicator.
I want to add a transparent border to the indicator, which surpasses the image in the background, like the image below.
It's easy when the background is a single color, I just have to add a border with the same color, but what to do when the background is a gradient or an image for example? If I add a white border, it looks like the image in the middle, and I would like to have a render like the right image.
How to achieve that ?
.user {
display: inline-block;
position: relative;
}
img {
width: 75px;
height: 75px;
border-radius: 75px;
}
.user-state {
position: absolute;
top: 4px;
right: 4px;
width: 15px;
height: 15px;
border-radius: 10px;
background: #57d642;
}
<body>
<div class="user">
<img src="http://lorempicsum.com/up/255/200/5" alt="">
<div class="user-state"></div>
</div>
</body>
I would consider SVG and mask like below:
.user {
display: inline-block;
position: relative;
}
svg {
width: 200px;
height: 200px;
}
.user:after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #57d642;
}
body {
background: linear-gradient(to right, pink, purple);
}
<div class="user">
<svg viewbox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole on the top -->
<circle r="28" cx="162" cy="38" fill="black"/>
</mask>
<!-- the clipath will replace border-radius -->
<clipPath id="circle">
<circle cx="100" cy="100" r="100" fill="white" />
</clipPath>
</defs>
<image width="200" height="200" xlink:href="https://picsum.photos/id/1003/200/200" mask="url(#hole)" clip-path="url(#circle)"/>
</svg>
</div>
Border: ?px
Border-color: rgba(255,255,255,0)
Related
I have 2 svgs one has viewbox and the other doesn't. Both are 100% width of the parent. The first one scales with the viewbox and the second scales with the height of the parent, because I have a hover height transition.
The problem is that I want both to have the same stroke-width. I want the stroke to scale like it scales with the svg that has viewbox, but the stroke of the second rect always stays 2px.
How can I keep the functionality of scaling the height of the rect with it's parent, but also to have the same border width as the first svg?
body > div{
width: 100px;
height: 400px;
}
svg{
width: 100%;
stroke-width: 2px;
stroke: black;
}
.svg-with-viewbox rect{
fill: red;
}
div > div{
height: 50px;
width: 100%;
transition: 1.5s all;
}
div > div:hover{
height: 200px;
}
.scale-height{
fill: yellow;
height: 100%;
}
<div>
<svg class="svg-with-viewbox" viewbox="0 0 20 20">
<rect height="20" width="20"/>
</svg>
<div>
<svg class="scale-height">
<rect width="100%" height="100%">
</rect>
</svg>
</div>
</div>
You could use a drop-shadow() filter , so no matter if the svg part is rescaled, it will remain the same size around the transparent edges.
example
body>div {
width: 100px;
height: 400px;
}
svg {
width: 100%;
filter: /* on on each sides */
drop-shadow( 2px 0 black)
drop-shadow(-2px 0 black)
drop-shadow( 0 2px black)
drop-shadow( 0 -2px black);
margin: 2px;/* increase margin or padding to include the drop-shadow */
}
.svg-with-viewbox rect {
fill: red;
}
div>div {
height: 50px;
width: 100%;
transition: 1.5s all;
}
div>div:hover {
height: 200px;
}
.scale-height {
fill: yellow;
height: 100%;
}
<div>
<svg class="svg-with-viewbox" viewbox="0 0 20 20">
<rect height="20" width="20"/>
</svg>
<div>
<svg class="scale-height">
<rect width="100%" height="100%">
</rect>
</svg>
</div>
</div>
I have an svg image and I am using flex to center the svg image inside div. svg image is getting properly centered in Chrome, but if I am trying to use the same behavior in IE 11, svg image is getting completely expanded and it covers the entire div.
jsbin link: https://jsbin.com/qufuqekera/1/edit?html,css,output
.svgImage {
width: auto;
display: flex;
align-items: center;
height: 100%;
padding-left: 10px;
padding-right: 10px;
}
svg {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: left;
transform-origin: left;
position: absolute;
border: 1px solid red;
background-color: yellow;
}
.defaultSize {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid black;
padding-top: 18px;
padding-bottom: 18px;
}
.scroll-bar {
overflow: auto;
position: absolute;
width: 100%;
}
.container {
height: 60vh;
position: relative
}
<div class="container">
<div class="defaultSize">
<div class="scroll-bar" style="height: calc(100% - 36px)">
<div class="svgImage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1575.01 278.01">
<defs>
<style>.cls-1,.cls-3{fill:#009a38;stroke:#000;stroke-miterlimit:10;}.cls-1{stroke-width:1.01px;}.cls-2{font-size:7px;fill:#f2f2f2;font-family:SiemensSans-Roman, Siemens Sans;}.cls-3{stroke-width:0.99px;}.cls-4{fill:#c8c8c8;}</style>
</defs>
<title>SVG Image</title>
<g id="Layer_2" data-name="Layer 2">
<g id="svgImage" data-name="SVG Image">
<g id="Auto_SVGImage" data-name="Auto_SVGImage">
<g id="Right_Image" data-name="Right Image">
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
Screenshot of output in Chrome displaying as expected: https://i.stack.imgur.com/COSm1.png
Screenshot of output in IE 11: https://i.stack.imgur.com/CWxo9.png
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>
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>
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>