How can I draw this using css ? I tried using border css and rotate the DIV, but didn't find out exact answer for this.
You need to use clippath
here is the example link
Codepen
html:
<div class="tag-blue" style="-webkit-clip-path: url(#clip1);clip-path: url(#clip1);">gadgets 3</div>
<svg width="0" height="0">
<defs>
<clipPath id="clip1" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, .82 1, 0 1">
</polygon>
</clipPath>
</defs>
</svg>
css:
.tag-blue{
background-color: red;
height: 300px;
width: 300px;
}
change path according to your need
You could use pseudo elements, :before : after for this, and transform property:
transform-origin: right bottom;
transform: skewY(-3deg);
transform-origin - set position of transform animation.
and transform itself set which type and value of animation you want to have
Here is code for your example: https://jsfiddle.net/2zbqgzcq/
And here you could read more about transform
div {
height: 120px;
width: 200px;
background: blue;
position: relative;
}
div:after {
content: "";
position: absolute;
background: blue;
height: 90%;
width: 100%;
transform: skewY(-15deg);
bottom: -25%;
}
<div></div>
You can achieve this by using transform property in css, try this
<!DOCTYPE html>
<html>
<head>
<style>
.header{
background-color: #000;
position: relative;
height: 150px;
width: 100%;
}
.header:after{
content: '';
transform-origin: right bottom;
transform: skewY(-4deg);
width: 100%;
height: 100%;
position: absolute;
background: inherit;
bottom: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
Related
I want to add waves for one of the divs. I used some website that generated svg with neccessary code. The problem is it covers all the content of my div. What seems to be the problem here?
.Upper-half-wrapper {
background-color: #0A2640;
height: 515px;
position: relative;
}
.custom-shape-divider-top-1655888002 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1655888002 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 266px;
transform: rotateY(180deg);
}
.custom-shape-divider-top-1655888002 .shape-fill {
fill: #1B3B5D;
}
<div className="Upper-half-wrapper">
<div className="custom-shape-divider-top-1655888002">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" className="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" className="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
className="shape-fill"></path>
</svg>
</div>
<div className="Upper-half-content">
Some text
</div>
</div>
It looks like the answer was to use position: relative; on content i wanted to be on top.
I created a three path SVG file
I want to use each part (left, middle, right) and clip each of the dive to get this
from this
CSS
.bgmove {
position: relative;
width: 1100px;
height: 70px;
}
.left {
clip-path: url(#clipLeft);
background-color: red;
width: 403px
}
.middle {
clip-path: url(#clipMiddle);
background-color: black;
width: 284px;
left: 373px;
}
.right {
clip-path: url(#clipRight);
background-color: green;
width: 473px;
left: 627px;
}
.left,
.middle,
.right {
height: 70px;
position: absolute;
}
HTML Code
<html>
<head>
</head>
<body>
<div class="bgmove">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<svg height="70" width="1100">
<defs>
<clipPath id="clipLeft">
<path d="M40.4575,70,0,0H362.543L403,70Z" />
</clipPath>
<clipPath id="clipMiddle">
<path d="M1100,70,1059.55,0H627l40.4506,70Z" />
</clipPath>
<clipPath id="clipRight">
<path d="M657,70,616.38,0H373l40.62,70Z" />
</clipPath>
</defs>
</svg>
</body>
</html>
you can see the result here
https://jsfiddle.net/Zivo/y4srujqe/
as you can see I only the left part is clipped while the the middle and the right are hidden for some reason though I used exactly the same seetings
What am I doing wrong
The divs are not inside the svg. If the shapes are going to be used as a clip-path, their origin is at the div itself. That means that clipMiddle and clipRight are way to the right of where you want them to be. To illustrate that, you can see the paths if you change every clip to #clipLeft:
.left {
clip-path: url(#clipLeft);
background-color: red;
width: 403px
}
.middle {
clip-path: url(#clipLeft);
background-color: black;
width: 284px;
left: 373px;
}
.right {
clip-path: url(#clipLeft);
background-color: green;
width: 473px;
left: 687px;
}
See the result at https://jsfiddle.net/vnkgd3r5/. The middle path is not well clipped because it is shorter than the other two.
I have this piece of code, and I wanted the SVG objects to expand upon hover. I looked up a solution to make the SVG object expand from the center of the shape, but it's unresponsive. My other attempt was to simply transform it using a:hover and using CSS transformations, but as you might expect, it scales, but also moves away from the canvas.
a {
display: block;
width: 1500px;
height: 850px;
transition: all .2s;
font-size: 0;
position: absolute;
background: black;
}
a:hover {
background: gray;
/*Attempt to scale using CSS, but there was a failure
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);*/
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
<head>
<svg>
<defs>
<clipPath id="c1">
<path
d="
M 10, 0
L 200, 80
L 300, 60
Z
"/>
</clipPath>
</defs>
<use xlink:href="#c1" transform="translate(-50,-50) scale (1.5)"/>
</svg>
</head>
<body>
<div id="navPanel">
Click me...
</div>
</body>
The issue is in width and height of the <a> tag
Here is working fiddle : https://jsfiddle.net/0we13sx9/2/
CSS
a {
display: block;
width: 300px;
height: 100px;
transition: all .2s;
font-size: 0;
position: relative;
background: black;
}
a:hover {
background: gray;
/* Attempt to scale using CSS, but there was a failure */
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
You've made it hard for yourself by using clip paths. Your problem is that the clip Paths have absolute coordinates. When you scale the <a> element up, you can't tell anything has happened because the clip path has stayed the same size.
You need to scale the clip path up. Which you can only do with Javascript. See below.
var item = document.getElementById("item1");
item.addEventListener("mouseover", function(evt) {
document.querySelector("#c1 path").setAttribute("transform",
"translate(155,40) scale(1.5) translate(-155,-40)");
});
item.addEventListener("mouseout", function(evt) {
document.querySelector("#c1 path").removeAttribute("transform");
});
a {
display: block;
width: 1500px;
height: 850px;
transition: all .2s;
font-size: 0;
position: absolute;
background: black;
}
a:hover {
background: gray;
}
svg {
display: block;
height: 0;
}
div#navPanel {
margin-top: 50px;
margin-left: 10vw;
}
<head>
<svg>
<defs>
<clipPath id="c1">
<path
d="
M 10, 0
L 200, 80
L 300, 60
Z
" />
</clipPath>
</defs>
</svg>
</head>
<body>
<div id="navPanel">
<a id="item1" href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
</div>
</body>
The enlarged clip path is itself being clipped by the edge of the <a> element. You could fix that by moving the clip path away from the edge. Ie increase the coordinate values in the clip path.
How to transform block in CSS? Pseudo-elements is need or not? I try to create block look like block on the picture below. I can't create such block as on the picture below.
This is my code:
.transform_items {
width: 40%;
height: 80px;
position: relative;
margin: 0 auto;
perspective: 600px;
margin-top: 150px;
left: 50px;
}
.block,
.block::before{
display: block;
position: absolute;
margin: 0 auto;
}
.block {
border: 5px solid transparent;
width: 350px;
height: 60px;
}
.block::before {
content: '';
border: 5px solid #52B352;
transform: rotateY(30deg);
top: -5px;
right: -5px;
bottom: -5px;
left: -35px;
}
.block a {
font-size: 24px;
}
<div class="transform_items">
<div class="block"><a>Block</a></div>
</div>
The expected result:
If you can use SVG (1), it could be like this
codePen
svg #block {
stroke: orange;
fill: none;
stroke-width: 5
}
svg text {
font-size: 25px
}
<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84">
<polygon id="block" points="33,13 245,24 245,60 29,64 " />
<text x="100" y="50">BLOCK</text>
</svg>
You can also save the svg code as a .svg file,without the text element, and use it as background-image for the div that contains your text
Read this to learn how to use svg in different ways: https://css-tricks.com/using-svg/
(1) Browser support for SVG is a little better than browser support for transform, caniuse: SVG
I want to create a curve as shown in below image using css.
I was trying something like this:
.curve {
background-color: #8aa7ca;
height: 65px;
width: 160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
<div class="curve">
<p>This is a sample text.</p>
</div>
Please help me
SVG
As Harry suggested in the comments, SVG would be your best option as a double curve in CSS isn't feasible without using multiple elements, pseudo elements or using possibly unsupported CSS3 properties.
SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.
It is well supported across all browsers as viewable here: CanIUse
<svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none">
<path d="M0,0
L100,0
C25,50 50,75 0,100z" fill="#8aa7ca" />
</svg>
SVG on MDN
CSS
Ofcourse this is still possible with CSS but does take using pseudo elements :before and :after. It is also not best for the curves as it will render them without anti-aliasing
div {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
div:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
div:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
<div></div>
SVG
In svg this can be created using a single path
<svg height="300px" viewBox="0 0 100 100">
<path fill="CornFlowerBlue" d="M0,0
100,0
C50,20 50,80 0,100 Z" />
</svg>
You could make this using pure CSS if you so wished.
Demo
This uses a large box shadow to create the second curve:
.wrap {
position: relative;
height: 400px;
width: 100%;
margin: 0 auto;
max-width: 1024px;
}
.shape {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 10;
}
.shape:after {
content: "";
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 90%;
border-radius: 0 50% 0 0;
box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 50%;
background: lightgray;
border-radius: 0 0 0 50%;
z-index: 10;
}
/******************************/
html,
body {
margin: 0;
padding: 0;
height: 100%;
vertical-align: top;
overflow: hidden;
background: cornflowerblue;
}
<div class="wrap">
<div class="shape"></div>
<div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div>
</div>
I had a similar requirement but found the CSS for this task to be far too complex for my knowledge level. So, instead, I used an online wave generator.
With that, you can draw the wave you need and generate the SVG.
Then all you have to do is just copy-paste code for the generated wave.
This is the one I used:
svg wage generator