Hi i'm trying to create a cross browser css triangle mask that also works in ie10.
heres what i have http://codepen.io/adamjw3/pen/RoxrNJ but it doesn't work in ie.
Any other way of doing this?
.slider {
-webkit-clip-path: polygon(0 0, 68% 81%, 100% 0);
clip-path: polygon(0 0, 68% 81%, 100% 0);
overflow: hidden;
margin: 0 auto;
width: 30%;
}
img {
height: 100%;
width: 100%;
max-width: 100%;
}
Its is not supported in IE. You can think of a different approach. Why don't you make a triangle via css and keep image inside it ?
More info here
http://caniuse.com/#search=clip-path
UPDATE: Another concept for triangle
.box1 {
width: 232px;
height: 180px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.box2 {
position: relative;
overflow: hidden;
transform: rotate(45deg) skew(10deg, 10deg);
border-left: 1px solid #000;
border-top: 1px solid #000;
width: 200px;
height: 200px;
margin: 81px 0 0 16px;
}
.box2_bg {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg);
background-size: 100%;
background-position: center top;
transform: skew(-10deg, -10deg) rotate(-45deg);
transition: .3s;
background-size: 50%;
}
.box2_bg:hover {
background-size: 90%;
}
<div class="box1">
<div class="box2">
<div class="box2_bg"></div>
</div>
</div>
You can play with this.
Related
How do you achieve this kind thing on the bottom of a div in CSS?
I try
&:before {
content: '';
position: absolute;
z-index: 2;
width: 133.93px;
height: 93.63px;
border-radius: 5px;
border: 1px solid #ffffff;
box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
background-image: $gradeint;
text-align: center;
transform-origin: center;
transform: rotateZ(45deg);
top: -10%;
right: 0;
}
but that not something I want
You can achieve something like the shape using the clip-path property. Here's an example.
The purple area actually covers the whole container, but the clip-path set on it clips it to the polygon defined by the points 0 0, 100% 0, 35% 60%, 0 0 where 0, 0 is the top-left corner of the container and 100%, 100% would be the bottom-right corner.
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
display: flex;
}
.accent {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: purple;
clip-path: polygon(0 0, 100% 0, 35% 60%, 0 0);
}
.image {
width: 125px;
height: 125px;
background-color: lightgray;
border-radius: 125px;
margin: auto;
z-index: 1;
}
<div class="container">
<div class="accent"></div>
<div class="image"></div>
</div>
i have created A triangle with css clip-path property to have few content inside.
.triangle {
background-color: grey;
-webkit-clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
img {
width: 100%;
position: relative;
left: 0;
top: 5%;
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
width: 110%;
}
}
&::after {
background-color: black;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity .5s;
opacity: 0;
}
}
i have put few content inside and for hover border effect i have created another triangle hidden back of this triangle.
I want to have SHADOW arround this triangle on hover. as shown in image given below.
I have tried ::before but not working, and everyother solution avaialable is not working with clip-path triangle.
Here is an idea without clip-path where the trick is to rely on cascading skew transformation to create the triangle shape and to keep the initial aspect of the content:
.tri {
margin: 40px;
width: 250px;
height: 200px;
border-left: 2px solid orange;
border-bottom: 2px solid orange;
overflow: hidden;
transform-origin: bottom;
transform: skewX(-32deg);
filter:drop-shadow(0 0 5px red);
}
.tri>.container {
height: 100%;
border-right: 2px solid orange;
overflow: hidden;
transform: skewX(51.35deg);
transform-origin: bottom;
}
.tri>.container>div {
transform-origin: bottom;
transform: skewX(-32deg);
height: 100%;
/* Irrelevant styles */
text-align: center;
display: flex;
flex-direction: column;
justify-content:center;
color:#fff;
background:
linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),
url(https://picsum.photos/id/10/1000/800) center/cover;
}
body {
background:grey;
}
<div class="tri">
<div class="container">
<div>
<h1>Title</h1>
<p>some text here</p>
</div>
</div>
</div>
Just add a parent element to triangle and add drop-shadow to the parent element.
Try this:
.triangleParent {
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
}
.triangle {
background-color: grey;
-webkit-clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
clip-path: polygon(50% 10%, 0% 100%, 100% 100%);
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
filter: drop-shadow(9px 9px 9px rgba(255, 23, 23, 0.5));
}
.triangle img {
width: 100%;
position: relative;
left: 0;
top: 5%;
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
width: 110%;
}
}
.triangle::after {
background-color: black;
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: opacity .5s;
opacity: 0;
}
<div class="triangleParent">
<div class="triangle">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
</div>
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
Is a gradient like this is possible with pure CSS3? I haven't found a way to create the "swirl".
If you set a pseudo element with a style similar to this, and some transparency applied, I think that you can achieve your request
.test {
height: 400px;
width: 400px;
position: relative;
border-top-left-radius: 180px 250px;
margin: 100px 200px;
box-shadow: -15px -15px 60px -20px lightgreen,
inset 10px 10px 15px -10px lightblue;
}
<div class="test"></div>
I have a prototype going using box-shadows:
.box {
width: 500px;
height:200px;
background: linear-gradient(to right, #50bcf3 , #60ec94);
overflow: hidden;
}
.box:before, .box:after {
content: "";
height: 100%;
width: 200px;
display: block;
position: relative;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.box:before {
left: 200px;
top: 100px;
box-shadow: -30px 0 40px -10px #60ec94;
transform: skewX(-10deg);
}
.box:after {
left: 200px;
top: -300px;
transform: skewX(-10deg);
box-shadow: inset -40px 0 70px -30px #60ec94;
}
<div class="box"></div>
I'm trying to replicate the following shape with no success:
I'm guessing I'll need some :before and :after pseudo elements along with the following css:
#pentagon {
position: relative;
width: 78px;
height:50px;
background:#3a93d0;
}
Using Border Method:
You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.
.pentagon {
height: 50px;
width: 78px;
background: #3a93d0;
position: relative;
}
.pentagon:after {
border: 39px solid #3a93d0;
border-top-width: 15px;
border-color: #3a93d0 transparent transparent transparent;
position: absolute;
top: 50px;
content: '';
}
<div class="pentagon"></div>
Using CSS Transforms:
This approach uses rotate, skewX and hence would need a fully CSS3 compliant browser to work properly. The advantage of this approach is that it allows borders to be added around the shape unlike when using border method. The drawback is that it needs additional calculations for the angles.
It is a modified version of the short triangle method mentioned in this CodePen demo by web-tiki.
.pentagon {
position: relative;
height: 50px;
width: 78px;
background: #3a93d0;
}
.pentagon:before {
position: absolute;
content: '';
top: 12px;
left: 0;
width: 46px;
height: 38px;
background: #3a93d0;
transform-origin: 0 100%;
transform: rotate(29deg) skewX(-30deg);
}
.pentagon.bordered {
background: white;
border: 1px solid #3a93d0;
}
.pentagon.bordered:before {
width: 44px;
height: 37px;
background: white;
border: 1px solid #3a93d0;
border-color: transparent #3a93d0 #3a93d0 transparent;
transform: rotate(29deg) skewX(-30deg);
}
/* Just for demo */
.pentagon {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pentagon"></div>
<div class="pentagon bordered"></div>
Using CSS Skew Transforms:
This approach uses just skew() (along both X and Y axes) and does not need any complex angle calculations. It just needs the dimensions and position of the pseudo-element to be adjusted as the dimension of the parent changes.
.pentagon {
position: relative;
height: 50px;
width: 78px;
border: 1px solid #3a93d0;
border-bottom: none;
background: aliceblue;
}
.pentagon:before {
position: absolute;
content: '';
top: 10px; /* parent height - child height -1px */
left: -1px;
width: 39px;
height: 39px; /* width of parent/2 */
border-right: 1px solid #3a93d0;
border-bottom: 1px solid #3a93d0;
background: aliceblue;
transform-origin: 0 100%;
transform: matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0);
}
<div class="pentagon">
</div>
The above snippet uses matrix transform because as per MDN, the skew(x, y) is removed and should not be used anymore. The Matrix Resolutions site can be used to obtain the equivalent matrix function. The matrix function for rotate(45deg) skew(-22.5deg, -22.5deg) is
matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0).
Using Clip Path:
Here is another approach to creating the pentagon shape with clip-path. Either a pure CSS clip-path or one with inline SVG can be used depending on required browser support. CSS clip-path is supported only by Webkit browsers at present.
IE (all versions) do not support either the CSS or the SVG clip-path.
.pentagon {
position: relative;
width: 75px;
height: calc(75px / 1.414);
background: #3a93d0;
}
.pentagon.css {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
.pentagon.bordered:after {
position: absolute;
content: '';
height: calc(100% - 2px);
width: calc(100% - 2px);
left: 1px;
top: 1px;
background: white;
}
.pentagon.css.bordered:after {
-webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg.bordered:after {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
/* Just for demo */
.pentagon {
margin: 10px;
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0 0,0.66 0.5,1 1,0.66 1,0z" />
</clipPath>
</defs>
</svg>
<h3>CSS Clip Path</h3>
<div class="pentagon css"></div>
<div class="pentagon bordered css"></div>
<h3>SVG Clip Path</h3>
<div class="pentagon svg"></div>
<div class="pentagon bordered svg"></div>
You can try an alternate approach using transform scaleX and rotate: 45deg;. This makes it very easy to create the bottom part of the shape.
transform: scaleX() rotate(45deg);
Working
*sorry for bad quality gif! :(
Sans border:
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
background-color: deepskyblue;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
background-color: deepskyblue;
}
<div id="pent"></div>
With border :
Fiddle
#pent{
height: 50px;
width: 100px;
position: relative;
border: 1px solid black;
border-bottom: 0;
}
#pent:before{
content: '';
position: absolute;
bottom: 0;
left: -1px;
width:45px;
height:45px;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleX(1.57) rotate(45deg);
-moz-transform: scaleX(1.57) rotate(45deg);
-ms-transform: scaleX(1.57) rotate(45deg);
transform: scaleX(1.57) rotate(45deg);
border: 1px solid black;
border-top: 0;
border-left: 0;
}
<div id="pent"></div>
See a demo - basically it uses css triangles and a pseudo element to give a place for the triangle.
.shape {
position: relative;
width: 78px;
height:30px;
background:#3a93d0;
}
.shape:after {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 39px 0 39px;
border-color: #3a93d0 transparent transparent transparent;
}
<style>
#pentagon
{
position: relative;
width: 54px;
border-width: 40px 18px 0;
border-style: solid;
border-color: #3a93d0;
}
#pentagon:after {
border-color: #3a93d0 transparent transparent;
border-style: solid;
border-width: 21px 45px 0;
content: "";
height: 0;
left: -17px;
position: absolute;
top: 0;
width: 0;
}
</style>
if you dont want to use css3 you can do it with css
only problem is this implementation is not responsive. :(
<pre>
<div class="moregrey"></div>
<div class="arrowdown"></div>
.moregrey
{
width: 1000px;
height: 30px;
background: #3f3f40;
}
.arrowdown
{
border-top:50px solid #3f3f40;
border-left:500px solid transparent;
border-bottom:500px solid transparent;
border-right:500px solid transparent;
display:block;
width:0px;
height:10px;
}
</pre>
<pre>
http://jsfiddle.net/jmqoj5nh/1/
</pre>