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>
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 a schematic as follows:
How can I use css and html to draw out such a thing?
I tried some of the ways, but it can not create the border for the triangle, I want the triangles to have borders, and I can set the border to two sides or one edge or all the edges of those triangles. .
Here is the code that I tried with the first pentagon:
<style type="text/css">
div {
position: relative;
width: 200px;
height: 150px;
background: #4275FF;
}
div:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 25px solid #4275FF;
right: -25px;
}
</style>
<div></div>
Another alternative
div {
position: relative;
width: 200px;
height: 150px;
background: #EEE;
border: 1px dashed #777;
position: relative;
}
div.v2 {
border-right: 0px;
}
div:after {
content: '';
z-index: -1;
transform: rotate(135deg);
background: inherit;
border: inherit;
width: 106px;
height: 106px;
top: 21px;
right: -53px;
position: absolute;
}
<div></div>
<div class="v2"></div>
I think the SVG is the best way to create the border for the triangle.
See the code, 'polyline' create a triangle. three 'line' are the border of the triangle, and you can change the color of these lines through the style-stroke-color.
<svg>
<polyline points="10,10 50,50 10,90" style="fill:#006600;stroke:#fff;" />
<line x1="10" y1="10" x2="50" y2="50" style="stroke:#ff0000;" stroke-width="2" />
<line x1="50" y1="50" x2="10" y2="90" style="stroke:#00ff00;" stroke-width="2" />
<line x1="10" y1="10" x2="10" y2="90" style="stroke:#0000ff;" stroke-width="2" />
</svg>
I want my svg images to be on bottom of my block (position:absolute, bottom:0). But in Internet Explorer it doesn't work (displays in the center). I can set width and height to svg and it will work somehow, but it will broke on another device with smaller/bigger screen size. How can I resolve this problem? Thank you!
Here is the code codepen
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="0,0 0,150 1300,150"></polygon>
</svg>
<svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="1300,0 0,150 1300,150"></polygon>
</svg>
</div>
You can achieve the same with using either simple divs or with pseudo elements. The following is an example I created to demonstrate both approaches.
https://codepen.io/Nasir_T/pen/oEYYob
The example uses position along with border to set the bottom design the way your want. You can use the div solution if you want to place images in it or use the pseudo solution if only want to show arrow cut in the design at the bottom.
If you want a background image, why not use a background-image??
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 52 3" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 26,3 52,0 52,3 0,3" fill="#fff" /></svg>');
background-repeat: no-repeat;
background-position: center bottom;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
</div>
This can be accomplished using CSS alone.
We can make triangle shape in CSS. Stick a triangle at the bottom of your main container. Will give the same effect.
.wrapper {
padding: 110px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
width: 1000px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 50px solid #000;
position:absolute;
bottom:-50px;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left:0;
}
.right {
right:0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<div class="arrow-down">
</div>
</div>
I'm trying to create two elongated hexagons in like:
The main features should be:
possibility to add a gradient background
possibility to add a gradient border
text could be two-lined or single-lined
responsive in a Bootstrap-grid (nice to have) - angles of corners should be always the same.
According to Elongated hexagon shaped button using only one element the best solution so far is like
https://jsfiddle.net/veuc78af/:
/*hexagons*/
.hexagon {
box-sizing: border-box;
position: relative;
display: inline-block;
min-width: 200px;
height: 80px;
margin: 40px auto;
color: #fd0;
text-align: center;
text-decoration: none;
line-height: 80px;
}
.hexagon:before, .hexagon:after {
position: absolute;
content:'';
width: 100%;
left: 0px;
height: 34px;
z-index: -1;
}
.hexagon:before {
transform: perspective(15px) rotateX(3deg);
}
.hexagon:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
/* hexagon Border Style */
.hexagon.border:before, .hexagon.border:after {
border: 4px solid #fd0;
}
.hexagon.border:before {
border-bottom: none;
/* to prevent the border-line showing up in the middle of the shape */
}
.hexagon.border:after {
border-top: none;
/* to prevent the border-line showing up in the middle of the shape */
}
/* hexagon hover styles */
.hexagon.border:hover:before, .hexagon.border:hover:after {
background: #fd0;
}
.hexagon.border:hover {
color: #fff;
}
The main problem with this solution is that it isn't possible to create a gradient background. So this isn't working in my case.
Is there any possibility to do that?
The main platform for this project is Safari on an iPad2.
Using CSS Clip Path:
The main platform for this project is Safari on an iPad2.
Since, your main platform is Safari and it does support CSS clip-path with shapes, you can make use of that feature to create the elongated hexagons like in the below demo.
Output produced by this approach will support (a) gradient backgrounds (b) a gradient border which is mimicked by placing a pseudo-element with a very similar clip-path but smaller dimensions (c) two lines of text (d) also maintain the angles of the corners because the points are at a fixed px distance.
.hex {
position: relative;
float: left;
height: 100px;
min-width: 100px;
padding: 12px;
margin: 4px;
font-weight: bold;
text-align: center;
background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54));
-webkit-clip-path: polygon(25px 0px, calc(100% - 25px) 0px, 100% 50%, calc(100% - 25px) 100%, 25px 100%, 0px 50%);
}
.hex.gradient-bg {
color: white;
}
.hex.gradient-border {
color: rgb(199, 41, 41);
}
.hex:before {
position: absolute;
content: '';
height: calc(100% - 14px); /* 100% - 2 * border width */
width: calc(100% - 14px); /* 100% - 2 * border width */
left: 7px; /* border width */
top: 7px; /* border width */
-webkit-clip-path: polygon(22px 0px, calc(100% - 22px) 0px, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0px 50%);
z-index: -1;
}
.hex.gradient-bg:before {
background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54));
}
.hex.gradient-border:before {
background: rgb(245, 246, 248);
}
span {
display: block;
margin-top: 50px;
padding: 8px;
transform: translateY(-50%);
}
<div class='hex gradient-border'>
<span>Some text</span>
</div>
<div class='hex gradient-bg'>
<span>Some very lengthy text</span>
</div>
<div class='hex gradient-bg'>
<span>Some very lengthy text
<br/>with line break</span>
</div>
<div class='hex gradient-bg'>
<span>Some very lengthy text
without line break</span>
</div>
Using SVG:
The same can be done using SVG also like in the below demo. It just requires a path to be created in the form of a hexagon and then for that path image to be placed behind the container.
The only drawback is that unlike CSS clip-path there is no non-JS way to get the angles to stay the same.
.hex {
position: relative;
height: 100px;
min-width: 100px;
padding: 12px 24px;
margin: 4px;
float: left;
font-weight: bold;
text-align: center;
}
.hex.gradient-bg {
color: white;
}
.hex.gradient-border {
color: rgb(199, 41, 41);
}
.hex svg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
path {
stroke: url(#brdgrad);
stroke-width: 7; /* border width */
}
.hex.gradient-bg path {
fill: url(#bggrad);
}
.hex.gradient-border path {
fill: rgb(245, 246, 248);
}
span {
display: block;
margin-top: 50px;
padding: 8px;
transform: translateY(-50%);
}
<svg width='0' height='0'>
<defs>
<linearGradient id='bggrad'>
<stop offset='0%' stop-color='rgb(199, 41, 41)' />
<stop offset='100%' stop-color='rgb(243, 67, 54)' />
</linearGradient>
<linearGradient id='brdgrad'>
<stop offset='0%' stop-color='rgb(199, 41, 41)' />
<stop offset='100%' stop-color='rgb(243, 67, 54)' />
</linearGradient>
</defs>
</svg>
<div class='hex gradient-border'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some text</span>
</div>
<div class='hex gradient-bg'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some very lengthy text</span>
</div>
<div class='hex gradient-bg'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some very lengthy text
<br>with line break.</span>
</div>
<div class='hex gradient-bg'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' />
</svg>
<span>Some lengthy text
without line break.</span>
</div>
(Don't be put off by how lengthy the SVG code is, it is so big only because I've repeated it more than once - once for each container. That can be reduced.)
.hexagon {
position: relative;
width: 180px;
height: 103.92px;
background-color: #ffffff;
margin: 51.96px 0;
border-left: solid 5px #808080;
border-right: solid 5px #808080;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 127.28px;
height: 127.28px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 21.3604px;
}
.hexagon:before {
top: -63.6396px;
border-top: solid 7.0711px #808080;
border-right: solid 7.0711px #808080;
}
.hexagon:after {
bottom: -63.6396px;
border-bottom: solid 7.0711px #808080;
border-left: solid 7.0711px #808080;
}
.hexText{
position: absolute;
top: 59px;
z-index: 999;
left: 12%;
text-align:center;
}
.bgGrey{
background:#e7e6e6 !important;
}
<div class="row">
<div class="col-md-3 col-xs-12">
<div class="hexagon"></div>
<p class="hexText">Up to 20% increase<br />in sales with<br />Cross sell & Up sell</p>
</div>
<div class="col-md-3 col-xs-12">
<div class="hexagon bgGrey"></div>
<p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p>
</div>
<div class="col-md-3 col-xs-12">
<div class="hexagon"></div>
<p class="hexText">Scalable100+million <br />statements<br />processed & <br />distributed monthly </p>
</div>
<div class="col-md-3 col-xs-12">
<div class="hexagon bgGrey"></div>
<p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p>
</div>
</div>
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