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.
Related
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?
i was tired to style a simple span with different texts inside (Text, Big Text, ..) to an Square-Arrow (see Picutre).
I have tried this by using a simple background, an Border an an Border-Image. But no solution has worked as propper. By using a background you will get problems if the text becomes larger, because of the strech. By using an Border you cant get that arrow/triangle on the right side. An the Border-Image gave me an creepy result...
The biggest problem on my side is the dynamic text. I have to set different texts with different length to the span. So if i have an bigger Text the the it should not strech the hole background, because thats looks very creepy.
Are there some tricks or do you have some tipps to get an good solution?
Thanks,
Kevin
You can use a single ::after pseudo-element to create this effect.
The clever part is using transform: rotate(45deg); to turn the pseudo-element 45 degrees, which creates the square arrow.
.arrow {
display: inline-block;
position: relative;
margin: 0 36px 36px 0;
padding: 6px 0 6px 6px;
font-size: 18px;
line-height: 18px;
font-family: arial, helvetica, sans-serif;
border: 2px solid rgb(0,0,0);
border-right: none;
border-radius: 5px 0 0 5px;
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.arrow::after {
content:'';
position: absolute;
display: inline-block;
top: 3px;
right: -12px;
width: 22px;
height: 22px;
border-top: 2px solid rgb(0,0,0);
border-right: 2px solid rgb(0,0,0);
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
transform: rotate(45deg);
}
<span class="arrow">Text</span>
<span class="arrow">Big Text</span>
<span class="arrow">Very Big Text</span>
<span class="arrow">Quite Spectacularly Big Text</span>
<span class="arrow">Phenomenally, Astoundingly, Almost Preposterously Big Text</span>
You can use :before and :after to draw a triangle. One will be black, and the second white on top of it, a bit smaller.
Here is a Snippet
body{
padding:30px;
}
span {
font:20px/20px arial,sans-serif;
padding:10px;
border:1px solid black;
background:white;
position:relative;
}
span:after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 22.5px 0px 22.5px 34px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
right: -34px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
span:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 23.5px 0px 23.5px 35px;
border-color: transparent transparent transparent #000;
position: absolute;
top: -1px;
right: -35px;
margin: 0;
padding: 0;
box-sizing: border-box;
z-index: -1;
}
<div><span>Hello, this is my text</span></div>
That was just a test, I did'nt check in every browser for compatibility, but it's a way to do it.
If the height is always the same, you can also use an image and make it appear thanks to an :after
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;
}
I am trying to add a border left to my selected buttons but there seems to be something odd happening I can't figure out.
You can see it in this JSFiddle.
The blue border on the left seems to have an odd 1px above it? It just doesnt sit perfectly square as i would have hoped.
HTML:
<div id="sidebarnav">
<br>
<div class="button-selected">Blog</div>
</div>
CSS:
#sidebarnav {
width:250px;
background-color:#202020;
height: 100%;
float:left;
position:fixed;
border-right: 1px solid #bbb;
}
.button-selected {
text-align:left;
width: 236;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 6px;
background-color:#161616;
color: #fff;
border-top: 1px solid #0A0A0A;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
overflow:auto;
cursor: pointer;
border-left: 4px solid #3498db;
}
You could work around the corner seam issue by adding a pseudo-element that acts like a border. Something like the following:
.button-selected {
/* all of your original styling here */
position: relative; /* relative positioning required for position
absolute on pseudo element */
padding-left: 14px; /* 4px of padding added to compensate for
width of pseudo element */
}
.button-selected:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px; /* width of desired 'border' effect */
background: #3498db;
}
Updated example of your jsfiddle here.
You may have probably seen this type of boxes with a triangular arrow tip on Facebook, Google, Twitter, etc. Fortunately, I've also created one with pure CSS.
Here is the code:
HTML :
<div class="box"><h3>This box contains a triangular arrow tip on top of it.</h3></div>
CSS :
.box { position: relative; background: #fff; color: #000; padding: 8px; border: 1px solid #ccc; }
.box:after {content: ""; position: absolute; display: block; width: 0; top: -15px; right: auto; bottom: auto; left: 5px; border-width: 0 10px 15px; border-style: solid; border-color: #fff transparent; }
You can see that the triangular tip is pure white color. And if you study the CSS you'll see that the white color of the tip is actually the color of the border.
Now what I'm looking for is a (gray coloured, for example) border or outline on the surface of the triangular tip. Because the color of the tip comes from the border, I can't use a second border because there is no such thing. I've tried outline but it doesn't seem to work. Any help how to do this with pure CSS?
Make use of the :before pseudo-element to place a similar arrow behind the first one.
This is the technique used on http://cssarrowplease.com.
See it in action based on your example.
.box:before {
content:"";
position: absolute;
display: block;
width: 0;
top: -16px;
right: auto;
bottom: auto;
left: 3px;
border-width: 0 12px 17px;
border-style: solid;
border-color: #ccc transparent;
z-index: -1;
}
Don't use borders to create the triangle. Simply use a pseudo-element on which you apply a CSS transform.
DEMO
Result:
HTML:
<ul class='drop-down'>
<li><a href='#'>Suggestions</a></li>
<li><a href='#'>Friends (8)</a></li>
<li><a href='#'>Friend Requests</a></li>
<li><a href='#'>My Requests</a></li>
<li><a href='#'>People I blocked</a></li>
</ul>
Relevant CSS:
.drop-down {
position: relative;
border: solid 1px #ccc;
background: white;
}
.drop-down:before {
position: absolute;
top: -.56em; left: 1em;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
width: 1em; height: 1em;
transform: rotate(45deg);
background: inherit;
content: '';
}
/* variations */
.drop-down:first-child:before {
transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
border-right: solid 1px #ccc;
border-left: none;
transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}
You can do this with with the UTF-8 "up arrow" and a bit of absolute positioning and a text shadow:
Your container:
.boxArrow {
margin-top:30px;
height:100px;
width:100px;
border:1px solid #000000;
position:relative;
}
The arrow:
.boxArrow:before {
content: "\25B2";
font-size:16px;
color:#ffffff;
position:absolute;
top:-15px;
left:30px;
text-shadow: -1px 0 black, 0 1px white, 1px 0 black, 0 -1px black;
}
For simplicity, easy and fast work, you can use jQuery UI : http://jqueryui.com/tooltip/#custom-style