Hi there I have a triangle corner element in my html/css.
The clip path works well on desktop but on Tablet/Ipad this does not work - it just displays normal rectangle flag and doesn't clip
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css" />
HTML
<div class="triangle"><span class="flag-icon flag-icon-us"></span></div>
CSS
.triangle {
position: absolute;
width: 0;
height: 0;
-webkit-clip-path: polygon(0% 100%, 0 0, 100% 0%);
clip-path: polygon(0% 100%, 0 0, 100% 0%);
border-top: 70px solid #d50032;
border-right: 70px solid transparent;
}
.triangle>span {
position: relative;
top: -71px;
left: -5px;
background-size: contain;
background-position: 0%;
background-repeat: no-repeat;
font-size: 70px;
}
This is my answer, did not need to clip it within another div..just all on the one class. Doh!
.triangle>span {
position: absolute;
top: -12px;
left: 0;
background-size: contain;
background-position: 0%;
background-repeat: no-repeat;
-webkit-clip-path: polygon(70% 0, 0 0, 0 70%);
clip-path: polygon(70% 0, 0 0, 0 70%);
width: 100px;
height: 100px;
}
Looking at https://www.wonderflags.pro/css-shapes it should be (inverted triangle)
.triangle {
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
Related
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
I have little problem with my header. I want to create something like this:
I made this, but I couldn't get the third div to appear on the same line as the others. How can I do that?
I've tried Float: left and tried, display
.logo {
float:left;
height: 80px;
width:100%;
background-color: green;
-webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}
.photo1 {
background-color: red;
background-size: cover;
background-position: center center;
width: 100%;
height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}
.photo2 {
background-color:brown;
background-size: cover;
background-position: left center;
height: 80px;
-webkit-clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
clip-path: polygon(62% 0, 100% 0, 100% 100%, 67% 100%);
}
<div class="header">
<div class="logo"></div>
<div class="photo1"></div>
<div class="photo2"></div>
</div>
Set 3 DIVs:
position: absolute;
width: 100%;
Also adjust the polygon size of .photo2
.logo {
position: absolute;
height: 80px;
width:100%;
background-color: green;
-webkit-clip-path: polygon(0 0, 18% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 18% 0, 23% 100%, 0 100%);
}
.photo1 {
position: absolute;
background-color: red;
background-size: cover;
background-position: center center;
width: 100%;
height: 80px;
-webkit-clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
clip-path: polygon(18% 0, 61% 0, 66% 100%, 23% 100%);
}
.photo2 {
position: absolute;
background-color:brown;
background-size: cover;
background-position: left center;
height: 80px;
width: 100%;
-webkit-clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
clip-path: polygon(61% 0, 100% 0, 100% 100%, 66% 100%);
}
<div class="header">
<div class="logo"></div>
<div class="photo1"></div>
<div class="photo2"></div>
</div>
How about something like this?
This also keeps the lines in a 45 degrees slope, no matter how wide the window is.
.header {
display: flex;
overflow: hidden;
}
.logo {
position: relative;
flex: 0 0 24%;
max-width: 24%;
height: 80px;
}
.logo:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -100%;
right: 0;
bottom: 0;
background-color: green;
transform: skewX(45deg);
}
.photo1 {
position: relative;
flex: 0 0 38%;
max-width: 38%;
width: 100%;
height: 80px;
}
.photo1:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -2px;
right: -2px;
bottom: 0;
background-color: red;
transform: skewX(45deg);
}
.photo2 {
position: relative;
flex: 0 0 38%;
max-width: 38%;
height: 80px;
}
.photo2:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: -100%;
bottom: 0;
background-color: brown;
transform: skewX(45deg);
}
<div class="header">
<div class="logo"></div>
<div class="photo1"></div>
<div class="photo2"></div>
</div>
This question already has answers here:
How can I create Triangle shape clip mask using CSS
(4 answers)
Transparent arrow/triangle indented over an image
(4 answers)
Closed 4 years ago.
I want the image to fill the whole space in the div, including the area of the arrow on the div's right side. I didn't find any tip or sample to solve the problem. Can you please help me?
.arrow_box {
position: relative;
background: #88b7d5;
width: 400px;
height: 200px;
}
.arrow_box:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 15px;
margin-top: -15px;
z-index: -30;
}
.user-image{
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
background-position: center center;
position: relative;
object-fit: cover;
z-index: 10;
}
<div class="arrow_box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" />
</div>
You can do it with the clip-path: polygon():
.arrow_box {
position: relative;
background: #88b7d5;
width: 400px;
height: 200px;
-webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}
.user-image {
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
background-position: center center;
position: relative;
object-fit: cover;
z-index: 10;
-webkit-clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
clip-path: polygon(0 0, 96% 0, 96% 43%, 100% 50%, 96% 57%, 96% 100%, 0 100%);
}
<div class="arrow_box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Amazona_aestiva_-upper_body-8a_%281%29.jpg" class="user-image" alt="">
</div>
I'm trying to create a border to my clip path using pseudo-elements. I have already tried to change positioning in them and my pseudoelement still stay on top of it. How can I change this?
You can see my code in here.
#shield {
z-index: 1;
background-color: red;
box-shadow: 1px 1px 1px black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
z-index: -1;
}
<div class="navbar-brand navbar-brand-centered" id="shield">
</div>
To see what I wanted to be in top of things, just delete the ::before element
Full example is in here
Thanks in advance :)
Just flip it around. Use your background image in your ::after and your black color for the actual div.
#shield {
z-index: 1;
background-color: black;
box-shadow: 1px 1px 1px black;
position: relative;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
position: absolute;
z-index: 1;
background-size: 50%;
}
<div id="shield"></div>
i want create Transversely div using css.
i want create look like show in following image.
following image
You can use:
transform: skew();
in your CSS.
Working Example:
body {
margin: 0;
}
.intro {
position: relative;
width: 65vw;
height: 100vh;
left: -15vw;
background-color: rgb(47, 47, 47);
transform: skew(-10deg);
}
<div class="intro">
</div>
something like this?
this is a quick copy/paste that i found on a site i made..
https://codepen.io/biroplane/pen/NpLrvE
#sx {
-webkit-clip-path: polygon(0 0, 95% 0, 74% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 0% 100%);
background-image: url('https://unsplash.it/1920/1080/?random');
//background-image: url('http://loremflickr.com/1920/1080/dog,cat');
background-position: center center;
background-clip: border-box;
background-repeat: no-repeat;
background-size: cover !important;
background-attachment: scroll;
overflow: scroll;
width: 50vw !important;
height: 100vh;
display: flex;
align-items: center;
align-content: center;
flex-direction: column;
transition: all 0.5s cubic-bezier(.34, -0.32, .42, 1.34);
&:hover {
border: 10px solid white;
width: 100vw !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
~ #dx {
//width:100vw !important;
}
h1 {
//margin-left: 25vw;
color: white;
#include textlongshadow(#222);
}
img {
//margin-left: 25vw;
#include longshadow();
//-webkit-filter:drop-shadow(10px 10px 10px white) drop-shadow(20px 20px 10px red);
//longdrop(20,#222);
}
}