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;
}
Related
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 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 can't find what I need. I have this code
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?
The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:
Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300/nature/2);
padding: 10px;
}
#subheader {
position: relative;
width: 400px;
height: auto;
border: 1px solid black;
border-bottom: none;
border-radius: 12px;
padding: 10px;
}
.arrow-down{
display: inline-block;
}
.arrow-down:after {
position: absolute;
content: '';
bottom: -10px; /* half the height of the element */
left: 50px; /* some aribitrary position */
height: 20px;
width: 20px;
transform: rotate(45deg);
transform-origin: 50% 50%; /* rotate around center which is at 60px from left */
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#subheader:after {
position: absolute;
content: '';
left: 74px; /* center point of arrow + 1/2 of hypotenuse */
height: 100%;
width: calc(100% - 74px); /* 100% - value of left */
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-right-radius: inherit; /* same border-radius as parent */
}
#subheader:before {
position: absolute;
content: '';
height: 100%;
width: 46px; /* center point of arrow - 1/2 of hypotenuse */
left: 0px;
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-left-radius: inherit; /* same border-radius as parent */
}
<div class='container'>
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
Read More
</hgroup>
</div>
Here is a working version of what you're after.
HTML
<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>
CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.
body {
background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg") fixed;
}
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
width: 75%;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
opacity: 0.5;
/*you may want to set the z-index level of your tri-down box.
z-index: 100;
*/
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
JSFIDDLE HERE
http://jsfiddle.net/LZoesch/dk43s2qz/
You will want to hide the DIV that is going to house your content. I added it to the above HTML code.
style="display:none"
Then you want to call the link on click and toggle the div class tri-down on/off
<script type="text/javascript">
$(function(){
$('#').click(function(){
$('#').toggle();
$('#').toggle();
});
});
</script>
Here is your orignal code.
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
If you dont want to set the opacity if your div, you can also try this below.
body {
background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
font-family: sans-serif;
text-align: center;
}
body > div {
color: #000;
margin: 50px;
padding: 15px;
position: relative;
}
.tri-down {
border: 5px solid #000;
content: "";
position: absolute;
}
you can try this one:
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
DEMO
You may need to overlay two images and absolutely position them. Like something along the lines of:
body{
padding:2em;
}
#subheader h1{
font-size:1.5em;
margin-top:0;
}
#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;
padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#subheader:after
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#subheader:before
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
z-index: 0;}
Like in this pen
I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!
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