Supposedly, all SVG presentation attributes can be used as CSS properties.
And yet preserveAspectRatio appears to be observed only when it is an inline property, not through CSS.
html, body { width: 100%; height: 100%; margin: 0; }
.wrapper {
width: 50%; height: 10%;
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #888; border-radius: 5px;
background-color: #eee; color: #000;
position: relative;
}
rect.rfoo { fill: #8af; }
svg.myrect1 {
position: absolute;
preserveAspectRatio: none;
left:0; top:0; width:100%; height:100%;
}
svg.myrect2 {
position: absolute;
left:0; top:0; width:100%; height:100%;
}
<div class="box wrapper">
<svg class="myrect1" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
<div class="box wrapper">
<svg preserveAspectRatio="none" class="myrect2" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
Why?
preserveAspectRatio is not a presentation attribute.
Related
I am trying to create a ban icon (created from html & css) over an image but I am having a hard time creating it. I have created somewhat static-looking ban icon but it seems perfect and not responsive. Can anyone please guide me on how this can be built?
What i have done so far:
.ban-icon-container{
position: absolute;
top: -10px;
left: 20%;
}
.ban-icon-circle{
width: 290px;
border: 8px solid red;
background: transparent;
height: 290px;
border-radius: 100%;
}
.ban-icon-bar{
height: 1px;
border: 7px solid red;
transform: translate(-1px, -151px) rotate(50deg);
width: 290px;
}
<div class="mt-2 flex align-center">
<div class="m-5 mt-16 mx-auto">
<div class="relative">
<img class="object-contain ban-icon-imgg" src="/img.jpg" alt="img" />
<div class="ban-icon-container">
<div class="ban-icon-circle">
</div>
<div class="ban-icon-bar">
</div>
</div>
</div>
</div>
</div>
Why have you used an attribute named className?
Change the attribute to class and also tweak the marked styles a bit.
Method 1
<style type="text/css">
.ban-icon-container{
position: absolute;
top: -10px;
left: 20%;
}
.ban-icon-circle{
width: 290px;
border: 8px solid red;
background: transparent;
height: 290px;
border-radius: 100%;
}
.ban-icon-bar{
//Change the height to 0px
height: 0px;
border: 7px solid red;
transform: translate(-1px, -151px) rotate(50deg);
//And the width to 240px
width: 240px;
}
</style>
<div class="mt-2 flex align-center">
<div class="m-5 mt-16 mx-auto">
<div class="relative">
<img class="object-contain ban-icon-imgg" src="jpg" alt="img" />
<div class="ban-icon-container">
<div class="ban-icon-circle">
</div>
<div class="ban-icon-bar">
</div>
</div>
</div>
</div>
</div>
Method 2 recommended
You can try using Font Awesome ban icon
I think the best way to create vector icon is SVG. Look at my code this way you can create any icon and this icon will behave like and image. You can scale it accordingly.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ban Icon</title>
<style>
.ban-icon-container {
position: absolute;
top: 10px;
left: 20%;
}
.ban-icon-circle {
width: 290px;
border: 8px solid red;
background: transparent;
height: 290px;
border-radius: 100%;
}
.ban-icon-bar {
border: 7px solid red;
transform: translate(-1px, -151px) rotate(50deg);
}
</style>
</head>
<body>
<div class="mt-2 flex align-center">
<div class="m-5 mt-16 mx-auto">
<div class="relative">
<img class="object-contain ban-icon-imgg" src="/img.jpg" alt="img" />
<div class="ban-icon-container">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="101" height="101" viewBox="0 0 101 101" preserveAspectRatio="xMidYMid meet">
<circle cx="51" cy="51" r="48" stroke="black" stroke-width="3" fill="none" />
<line x1="17" y1="84" x2="84" y2="17" stroke="black" stroke-width="3" />
</svg>
</div>
</div>
</div>
</div>
</body>
</html>
This is the only code that is creating your ban icon. You can change colors and stroke width
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="101" height="101" viewBox="0 0 101 101" preserveAspectRatio="xMidYMid meet">
<circle cx="51" cy="51" r="48" stroke="black" stroke-width="3" fill="none" />
<line x1="17" y1="84" x2="84" y2="17" stroke="black" stroke-width="3" />
</svg>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 220px;
height: 220px;
}
img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.ban-icon::before,
.ban-icon::after {
position: absolute;
display: block;
content: '';
width: 70%;
height: 35%;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid red;
z-index: 1;
}
.ban-icon::before {
top: 15%;
right: -8px;
transform: rotate(45deg);
border-bottom: 10px solid red;
}
.ban-icon::after {
bottom: 15%;
left: -8px;
transform: rotate(-135deg);
border-bottom: 0;
}
<div class="wrapper">
<div class="ban-icon"></div>
<img src="https://www.w3schools.com/html/img_chania.jpg">
</div>
I have some trouble aligning an svg I am new to this thing. I want to see it as a whole and place it at the center of the main container. Need your help guys. Thanks in advance.
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
.css
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
}
svg.morph {
position: absolute;
margin: 0;
background-color: #00ff1f;
}
Please use the correct viewBox="168 140 1065 600" value.
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
height:100vh;
}
svg.morph {
position: absolute;
margin: 0;
max-width:100%;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="168 140 1065 600" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
Center with position absolute:
position absolute:
left:50%;
top:50%;
transform: translate(-50%, -50%);
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
border: 2px solid red; /*<<<<<<<<<<<<<<<<<<<<< Added to see container limit */
}
svg.morph {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
This is the layout I'm looking to achieve:
I've created the hexagon with this css:
.hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
However, I'm looking to find out how to fill them with an image.
Here is a pen:https://codepen.io/1istbesser/pen/ddypXK
How do I put images inside the hexagon so that it covers all of it? If I use background-image on #hexagon1, the image only covers the middle part.
The problem you're going to run into is that using CSS triangles to create a hexagon actually yields square boxes with one or two borders filled in (and the rest transparent). This has two effects:
You can't easily put an image into the filled border so that it's clipped.
You can't make the hexagon - and only the hexagon - clickable: the whole set of rectangles will always be clickable, which will make your layout tricky where they overlap.
You're going to need something that can produce an actual hexagon. Inline SVG with a clip-path is a good fit - unlike clip-path in CSS, it's supported pretty much wherever SVG is. Here's an example:
<svg class="svg-graphic" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="300,150 225,280 75,280 0,150 75,20 225,20" />
</clipPath>
</defs>
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>
Here's a more detailed example showing clickable hexagons, and re-use of the clip path definition:
.svg-template {
position: absolute;
}
.honeycomb {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 1200px;
height: 1200px;
border: 1px solid #DDD;
}
.honeycomb li {
margin: 0;
padding: 0;
position: absolute;
}
.honeycomb li:nth-child(1) {
top: 0;
left: 0;
}
.honeycomb li:nth-child(2) {
top: 0;
left: 290px;
}
.honeycomb li:nth-child(3) {
top: 0;
left: 580px;
}
.honeycomb li:nth-child(4) {
top: 240px;
left: 145px;
}
.honeycomb li:nth-child(5) {
top: 240px;
left: 435px;
}
.honeycomb li:nth-child(6) {
top: 240px;
left: 725px;
}
.honeycomb li a {
cursor: pointer;
}
.honeycomb li a:hover image{
opacity: 0.5;
}
<svg class="svg-template" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="50 0, 95 25, 95 75, 50 100, 5 75, 5 25" />
</clipPath>
</defs>
</svg>
<ul class="honeycomb">
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
</ul>
You need to consider another way if you want to use image as background. You are relying on pseudo element so your hexagone is not one element and thus you cannot use background image to cover the whole area.
Here is an idea using clip-path:
* {
background-color: black;
}
section {
margin-top: 3em;
display: flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 100px;
background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
position: relative;
display: inline-block;
margin: -10px 0.2em;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>
What you could do is draw an SVG and than put the image as mask in css
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
*{
background-color:black;
}
section{
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
-webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
background-size: cover;
background-position: center;
}
.row{
text-align: center;
margin-top: -25px
}
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>
I made this code
Codepen
I changed the way you draw the element, instead adding the border top with the color red, I added the sides with a background, but you'd need to know the background-color of the page to do that, so I put the image above the box and the before and after above the image
CSS
*{
background-color:black;
}
section{
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
overflow: hidden;
}
.hexagon img{
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
height: 100%;
transform: translate(-50%, -50%);
z-index: 1;
}
.hexagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-bottom: 25px solid transparent;
z-index: 2;
}
.hexagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-top: 25px solid transparent;
z-index: 2;
}
.row{
margin-top:1.3em;
}
.hexagon#hexagon2{
background-color: purple;
}
.hexagon#hexagon2:before{
border-bottom-color: purple;
}
.hexagon#hexagon2:after{
border-top-color: purple;
}
.hexagon#hexagon3{
background-color: white;
}
.hexagon#hexagon3:before{
border-bottom-color: white;
}
.hexagon#hexagon3:after{
border-top-color: white;
}
.hexagon#hexagon4{
background-color: orange;
}
.hexagon#hexagon4:before{
border-bottom-color: orange;
}
.hexagon#hexagon4:after{
border-top-color: orange;
}
This question already has answers here:
Wave (or shape?) with border on CSS3
(5 answers)
Closed 6 years ago.
How to design This Image
I want to design this type image.
.container {
background: #fff;
padding: 20px;
}
.round {
width: 100px;
height: 100px;
border: solid 2px #000;
position: relative;
}
.round:before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border-bottom: solid 2px #000;
position: absolute;
top: -12px;
left: -11px;
transform: rotate(315deg);
}
.round:after {
content: '';
width: 20px;
height: 20px;
background: #fff;
border-top: solid 2px #000;
position: absolute;
bottom: -12px;
right: -11px;
transform: rotate(315deg);
}
<div class="container">
<div class="round"></div>
</div>
hat do you think?
Perhaps look at using an inline svg image, this would give you control over background image, and would allow for the shape to "scale", and if you like, change the background color (fill) when you like.
HTML
<div class="cornered-box">
<div class="svg-cont">
<svg width="200px" height="200px" viewBox="635 375 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="675.163277 376 836 376 836 535.221624 796.221624 575 636 575 636 414.163277"></polygon>
</defs>
<use stroke="#000000" stroke-width="2" fill="transparent" xlink:href="#path-1"></use>
</svg>
</div>
<div class="cornered-box-content">
<p>
Some content for the box
</p>
</div>
</div>
CSS
.cornered-box{
height:200px;
width:200px;
position: relative;
padding:20px 5px;
box-sizing:border-box;
}
.cornered-box .svg-cont{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
}
.cornered-box .svg-cont svg{
height:100%;
width:100%;
}
.cornered-box .svg-cont svg use{
fill:transparent;
transition: fill 0.2s ease-in-out;
}
.cornered-box:hover .svg-cont svg use{
fill:#F00;
}
JSFIDDLE
Link to SVG
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>