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>
Related
I'm trying to improve my css skills, and wanted to draw like a moon and outline it. I mad this by using 2 circles and the second one has the same color as the background so it look like a moon. However now i want to outline/ give it a border but i don't know how to do this, because the other parts are overlapped with the secon circle.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
I would simplify your code using mask then I will rely on drop-shadow filter for the outline
#div1{
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}
#div1:before {
content:"";
display:block;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
-webkit-mask: radial-gradient(circle 100px at 80% 50%,#0000 98%,#000);
}
<div id="div1"></div>
You can add border left property to div2 for desired result.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 3px solid black;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
Like Justinas already commented, you're kind of trying to do SVG's job in CSS here, which is pretty clunky and inefficient.
If you know a little HTML and CSS, which it seems you do, then SVG will feel like just more of the same.
SVG will just look like a couple new HTML elements to you, and you just sprinkle it right into your HTML; It also just uses the same CSS stylesheet that as your HTML already uses.
To illustrate, run this snippet here; just a couple lines of CSS and some SVG, i'm sure you can tell what 90% of it means instantly.
body { background-color: #FFF; }
svg { background-color: #CCC; }
.gradient_start { stop-color:rgb(255, 255, 0); stop-opacity: 1; }
.gradient_end { stop-color:rgb(255, 0, 0); stop-opacity: 1; }
text { font-family: "Verdana"; font-size: 32pt; }
<html>
<body>
<svg width="400" height="200">
<defs>
<linearGradient id="mygradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" class="gradient_start" />
<stop offset="100%" class="gradient_end" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#mygradient)" />
<text x="150" y="86" fill="#ffffff">
Turtles !
</text>
</svg>
</body>
</html>
In SVG you have access to a lot more drawing elements, such as the <ellipse> used in this example.
Look at the result, using the border-left property.
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 2px solid black;
}
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
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.
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
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;
}
Is there a way to create a border on hover for only edges of the div. Here is the basic layout of my grid created using bootstrap. here is my codepen http://codepen.io/anon/pen/zvxEYw
<div class="product-grid col-md-4">
<a class="preview" href="#">PREVIEW</a>
</div>
.product-grid{
margin:30px 0 0 30px;
border:1px solid #ccc;
height:300px;
display:block;
}
.product-grid:hover{
border:1px solid #000;
}
/* Preview */
.preview {
opacity: 0;
position: absolute;
left: 40px;
right: 40px;
top: 0;
height: 30px;
line-height: 32px;
background-color: #fe3;
text-align: center;
text-decoration: none;
color: #000;
transition: .2s;
}
.product-grid:hover .preview {
opacity: 1;
top: 80px;
}
For clear understand I have attached a sample image below
Achieving that kind of effect, is best possible if you use CSS3, and I've done it by using <svg> as:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0" />
<line class="left" x1="0" y1="460" x2="0" y2="-920" />
<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
<line class="right" x1="300" y1="0" x2="300" y2="1380" />
</svg>
Here look into my JSFiddle, Hope you're looking something like this.
And it will do the trick for you.
Further customization is no big deal, just look into its CSS and you can changes it as per your requirement.
Source: tympanus
please try this one sir:
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
#div1:hover {
border: 1px solid red;
}
DEMO