How can i apply a color to the following image (currently is white, not sure how i change it)?
Without Background Color
This is the css
.carousel-inner:after {
right: 0px;
border-right: 100vw solid #ffffff;
border-left: 0px solid white;
}
If i try to add a background color, it is applied like here:
With Background Color
.carousel-inner:before, .carousel-inner:after {
content: "";
position: absolute;
bottom: 0px;
border-top: 123px solid transparent;
border-bottom: 0px solid transparent;
width: 50%;
overflow: hidden;
z-index: 9;
z-index: 0;
/* background: red; */
}
Thanks!
In those cases you manipulate "background color" by changing border color. Can you try to edit this:
.carousel-inner:after {
right: 0px;
border-right: 100vw solid #ffffff;
border-left: 0px solid white;
}
and replace #ffffff and white with your desired color?
Related
I'm looking for a way to draw a special shape like in the picture using Css3. Any idea or drawing way to draw that shape using Css3?
I have referenced several ways but it just draws into a normal triangle.
#shape {
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
}
<div id="shape"></div>
you can add border-bottom-right-radius in your #shape css. you just need to set the border-left to white or depending on your background color of your div to match the color
#shape {
width: 0;
border-left: 72px solid white;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
border-bottom-right-radius: 20px;
}
<div id="shape"></div>
it can be done using an after element on shape
#shape{
width: 100px;
height: 100px;
border-left: 0px solid transparent;
border-top: 0px solid transparent;
border-right: 1px solid blue;
border-bottom:1px solid blue;
border-bottom-right-radius: 25px;
position: relative;
overflow: hidden;
}
#shape::after{
content:"";
position: absolute;
background-color: blue;
width: 1px;
height: 150%;
bottom: 0;
transform-origin: bottom;
transform: rotateZ(45deg);
}
<div id="shape"></div>
I am attempting to have a unique button shape that is achieved using pseudo-elements become transparent on one end so the background will show through. If the background is set to a solid color, the desired result is easily achieved because I can change the ::after element to be the same color. Though, I'm struggling to come up with a solution if the background is an image or svg.
codepen: https://codepen.io/codingforthefuture/pen/YzKvGvq
I have the ::after element set to white to demonstrate the problem, though you can change it to pink to see the desired result.
Problem occurs if you change the color of the pseudo-element to transparent, you see the other pseudo-element in its place. If you remove that pseudo-element you remove the border on that end for the shape.
body{
background: pink;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
a .btn-flag {
padding: 0;
border: 0;
outline: none;
text-decoration: none;
}
a.btn-flag strong{
position: relative;
color: black;
font-size: 0.8rem;
bottom: -2px;
right: 10px;
}
.btn-flag {
display: inline-block;
font-size: 0.7rem;
min-width: 200px;
height: 35px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: black;
font-size: 7px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
.btn-flag::before,
.btn-flag::after {
content: "";
position: absolute;
top: -1px;
width: 0;
height: 0;
left: 87%;
/*should be transparent, Should acheive same effect as setting the color from #fff to pink but without knowing background set color, possible image or svg in background*/
border-right: 26px solid #fff;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
}
.btn-flag::before{
/* other color to change, but changing gets rid of border on flag end */
border-right: 26px solid red;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
left: 86.5%;
}
/****************************************************/
<body>
<a href="#" class="btn-flag">
<strong>Example Text</strong>
</a>
</body>
Try something like this! https://codepen.io/anonymousjoe/pen/wvwXJwz
Rather than trying to get pseudo elements to have crazy shapes and crazy borders, we can give each pseudo element the funny flag shape, and then fake the outlines on them using drop-shadows.
filter: drop-shadow(0 -1px 0 red) drop-shadow(1px 0 0 red);
Another option would be to use SVGs as background-images on each of the pseudo-elements positioned the same way I have them here.
I am trying to make a top-left triangle (red) with a (black) border. I want it to have the black border all the way around. This attempt angles a square to fake it (pushed outside the screen to mimmick a triangle)
I want the border all the way around, in which my attempt won't work
#corner {
height: 75px;
width: 100px;
position: absolute;
left: -3em; top: -2em;
z-index: 999;
transform: rotateZ(-45deg);
background-color: red;
border-bottom: 5px solid #0c0c0c;
}
<div id="corner"></div>
There is an easier way to create triangles, you can just use an element with a width / height of 0.
And for the border you want, the idea is to have two overlapping triangles in two different colors and different sizes, maybe take a look at the following snippet:
.triangle-up-left-1 {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 85, 85);
border-right: 50px solid transparent;
z-index:2;
position:absolute;
top:5px;
left:13px;
}
.triangle-up-left-2 {
width: 0;
height: 0;
position:absolute;
top:0;
border-top: 68px solid rgb(0, 0, 0);
border-right: 68px solid transparent;
z-index:1:
}
<div class="triangle-up-left-1"></div>
<div class="triangle-up-left-2"></div>
You can made triangle also like this: https://css-tricks.com/examples/ShapesOfCSS/
I tried to combine two of them and with margin to position it, so it would look as one with a border. Perhaps this is a possible solution for you. Cheers.
.triangle1 {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
}
.triangle2 {
width: 0;
height: 0;
border-top: 82px solid red;
border-right: 82px solid transparent;
position: absolute;
margin-top: -95px;
margin-left: 5px;
}
<div class="triangle1">
<div class="triangle2"></div>
</div>
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
I would like to get a sort of text bubble with a transparent background. So I used border to get this done. Now I want to have a little arrow at te bottom border in the middle. But when I add this with the pseudo ::after the border bottom will override the transparent image. For better understanding, check the image below.
CSS:
.case-study .testimonial blockquote {
margin: 60px 0;
border: 4px solid #FFF;
text-align: center;
position: relative;
}
.case-study .testimonial blockquote::after {
height: 20px;
width: 20px;
background: url('../images/blockquote-arrow.png') no-repeat center;
position: absolute;
bottom: -14px;
left: 50%;
content: "";
display: block;
}
I wish it can be like below image:
Thank you.
The simplest approach would be to add another element and use it to overlay the bottom border. In the example below, you can see that I use CSS triangles as opposed to images. The :after pseudo element adds the white triangle and the :before pseudo element is a smaller, black triangle that overlays the excess white bottom border.
Example Here
blockquote:after {
content:'';
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid #fff;
position: absolute;
bottom: -14px;
left: 50%;
margin-left: -14px;
}
blockquote:before {
content:'';
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -8px;
z-index: 1;
}