http://jsfiddle.net/VpW5x/1141/
.one-line {
position: relative;
}
.one-line:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 25px;
background: red;
clip-path: polygon(100% 50%, 0 0, 0 100%);
left: 100%;
}
How to make the right arrow appear after the text, even if the text is really long like in the example?
use this css will help you
.one-line {
position: relative;
display:inline-block;
vertical-align:top;
}
.one-line:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 25px;
background: red;
clip-path: polygon(100% 50%, 0 0, 0 100%);
left: 100%;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
Can't understand why this code is working in my first html, but here isn't. When i add any text instead space in content it works. I need just 2 lines around headerBuy_bs. And any text for accept.
.buyBox_bs {
grid-area: 2/2/2/3;
width: max-content;
margin: auto;
margin-top: 5vmin;
}
.headerBuy_bs {
color: black;
margin-bottom: $gor-10 * 3;
text-align: center;
font-size: $font-24;
margin-top: $gor-10 * 3;
}
.headerBuy_bs:after {
content: "";
height: 2.09vh;
width: 4.48vw;
background: linear-gradient(
to right,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
right: 22%;
}
.headerBuy_bs:before {
content: "";
height: 0.09vh;
width: 4.48vw;
background: linear-gradient(
to left,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
left: 22%;
}
<div class='buyBox_bs'>
<div class='headerBuy_bs'>hello</div>
</div>
Just add display:inline-block; to .headerBuy_bs::after and .headerBuy_bs::before
.buyBox_bs {
grid-area: 2/2/2/3;
width: max-content;
margin: auto;
margin-top: 5vmin;
}
.headerBuy_bs {
color: black;
margin-bottom: $gor-10 * 3;
text-align: center;
font-size: $font-24;
margin-top: $gor-10 * 3;
}
.headerBuy_bs::after {
content: "";
display:inline-block;
height: 2.09vh;
width: 4.48vw;
background: linear-gradient(
to right,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
right: 22%;
}
.headerBuy_bs::before {
content: "";
display:inline-block;
height: 0.09vh;
width: 4.48vw;
background: linear-gradient(
to left,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
left: 22%;
}
<div class='buyBox_bs'>
<div class='headerBuy_bs'>hello</div>
</div>
May you add position: absolute; to .headerBuy_bs:before and .headerBuy_bs:after and for .headerBuy_bs add position: relative;
.headerBuy_bs {
position: relative;
}
.headerBuy_bs:after {
position: absolute;
right: -100%;
top: 50%;
transform: translateY(-50%);
}
.headerBuy_bs:before {
position: absolute;
left: -100%;
top: 50%;
transform: translateY(-50%);
}
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I want background shape to include triangle shape and I did it with css. I want that to be responsive in every screen size. I am stuck in this . Any advice ...
header {
width: 100%;
height:150px;
background: #eee;
}
main {
width: 100%;
height:150px;
background: #000;
position:relative;
z-index: 1;
}
main::before {
background: inherit;
top: 0;
content: '';
display: block;
height: 90%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-3deg);
transform-origin: 0;
z-index: -1;
}
main::after {
border-top: 16vh solid blue;
border-left: 50vw solid transparent;
width: 0;
height: 0;
transform: skewY(-3deg);
position: absolute;
content: "";
transform-origin: 0;
right: 0;
top: -10%;
}
<header></header>
<main>
<main>
Expected result in every screen size
You can use clip-path - polygon properties for this.
The issue is, this doesn't support on IE 🤷♂️
More information
Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
W3Schools: https://www.w3schools.com/cssref/css3_pr_clip-path.asp
CSS Tricks: https://css-tricks.com/almanac/properties/c/clip-path/
main {
position: relative;
width: 100%;
height: 150px;
background: #000;
z-index: 1;
overflow: hidden;
}
main::before,
main::after {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
main::before {
background-color: #00f;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}
main::after {
background-color: #fff;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
<main><main>
You can try like below:
html::before {
content: "";
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60vh;
transform-origin: right;
transform: skewY(-5deg);
background: linear-gradient(-160deg, blue 15vw, #000 15.2vw);
}
I really dont want to answer my own question though, I have been research for about two days and I found something really effective solution. So let me post it .
If I have modify a little bit on main::after property , it can be show responsively now.
transform-origin: 0; to transform-origin: -99%;
top: -10% to top: 0
That is...
I have a simple 100vw-100vh page with 3 images in the background for mobile, and 5 in a different set-up for larger viewports.
The way I have it set-up so far:
3 (or 5) div containers, clipped as a polygon in CSS
the images set as background-image of each container in CSS, with background-size: cover.
This works fine to display the images, but when I try to add borders to the containers the clipped sides won't get the border, only the "original" bits would (as in, of the sides of the rectangles before clipping).
Is there a way to add them all around?
Note: I have played with background-origin without result. The whole page is set-up with box-sizing: border-box; but it does not seem to impact the result either.
Codepen of my code, for the mobile version (3 images) below.
Many thanks for your help!
PS: I have seen a couple of posts related to the topic to an extent, but not with the background image set-up the same way, and as they were all a bit old I thought wider browser support may help #hope. Sorry for any redundancy I would have missed!
https://codepen.io/aguafresca/pen/abNvyXO?editors=1100
<body> <main>
<welcome-page>
<contacto-link>
<p>contact details</p>
</contacto-link>
</welcome-page>
<background-container id="cont1" class=""></background-container>
<background-container id="cont2" class=""></background-container>
<background-container id="cont3"></background-container>
</main> </body>
CSS:
/* general set-up */
html {
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
*, *:before, *:after, a, main, body {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/* setting-up the background */
welcome-page {
z-index: 2;
height: 100vh;
width: 100vw;
position: absolute;
top:0;
left:0;
background-color: rgba(255, 255, 255, 0.3);
}
background-container {
display: block;
z-index: 1;
position: absolute;
background-color: dimgray;
background-size: cover;
border: red solid 3px;
background-origin: content-box;
}
#cont1 {
top: 0;
left: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://images.unsplash.com/photo-1596072181334-1adc75da7717?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont2 {
top: 0;
left: 0;
height: 100vh;
width: 100vw;
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://images.unsplash.com/photo-1595680337986-ce4862b497b9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont3 {
bottom: 0;
right: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://images.unsplash.com/photo-1595035848637-29bd22af4faf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
border-color: green;
z-index:10;
}
/* footer format */
contacto-link {
display: block;
position: fixed;
bottom: 0;
height: 5vh;
width:100vw;
line-height: 5vh;
background-color: rgba(255, 255, 255, 0.8);
color: dimgrey;
}
Using an extra wrapper you can consider drop-shadow to simulate the borders.
Here is an example where I will not really and an extra wrapper but I will use pseudo element for the image:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px red)
drop-shadow(3px 0px 0px red)
drop-shadow(0px -3px 0px red)
drop-shadow(-3px 0px 0px red)
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
And with different coloration:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px var(--c,red))
drop-shadow(3px 0px 0px var(--c,red))
drop-shadow(0px -3px 0px var(--c,red))
drop-shadow(-3px 0px 0px var(--c,red))
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
--c:blue;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
--c:yellow;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
I am trying to clip a triangle inside a div .box-inner-2 and mask the outside of that to look like:
but what I am getting now is this. Can you please let me know how to do this?
.wrapper{
position: relative;
height: 250px;
width: 250px;
}
.box-inner-1{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
}
.box-inner-2{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
clip-path: polygon(10% 0, 0 20%, 20% 20%);
}
<div class="wrapper">
<div class="box-inner-1"></div>
<div class="box-inner-2"></div>
</div>
So here is a brief of what I changed in your code:
Moved the triangle clip-path: polygon(10% 0, 0 20%, 20% 20%) to the box-inner-1 (adjusted top and left for illustration)
Added an inset clip-path to the box-inner-2 and a psuedo after element to clip the triangle.
See demo below:
.wrapper {
position: relative;
height: 250px;
width: 250px;
border: 2px solid;
}
.wrapper:after {
content: '';
clip-path: inset(0% 94% 0% 0%);
background: #fff;
display: block;
height: 100%;
}
.box-inner-1 {
position: absolute;
top: 10px;
left: 10px;
right: 0;
bottom: 0;
background-color: red;
clip-path: polygon(10% 0, 0 20%, 20% 20%);
}
.box-inner-2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
clip-path: inset(0% 0% 93% 0%);
}
<div class="wrapper">
<div class="box-inner-1"></div>
<div class="box-inner-2"></div>
</div>