hi everyone i am not good at front but i need to make a text bubble like this:
speechBubble
my best attempt was this but I need to lower the diamond in half to make it look acceptable: myspeechBubble
if anyone knows how to do it in css I would really appreciate it, i need to place 3 different bubbles with one pointer in the middle, left and right
You can use the below as your starting point and adjust the positions according to your needs.
Make use of psuedo selectors to achieve the same. ( there may be limitations on the styling properties)
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-top {
margin-top: 40px;
}
.box.arrow-top:after {
content: " ";
position: absolute;
right: 30px;
top: -15px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid black;
}
.box.arrow-right:after {
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid black;
border-bottom: 15px solid transparent;
}
.box.arrow-bottom:after {
content: " ";
position: absolute;
right: 30px;
bottom: -15px;
border-top: 15px solid black;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
}
.box.arrow-left:after {
content: " ";
position: absolute;
left: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: 15px solid black;
border-left: none;
border-bottom: 15px solid transparent;
}
<div class="box arrow-top">
This is a box with some content and an arrow at the top.
</div>
<div class="box arrow-right">
This is a box with some content and an arrow on the right.
</div>
<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>
<div class="box arrow-left">
This is a box with some content and an arrow on the left.
</div>
Related
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
By responsive I mean that they still look good with slightly longer text and don't have fixed width.
I am trying to make buttons that look exactly like in image below, but I can't get them to be the right width. I thought adding padding on left and right side would do it, but that doesn't work with the "ADD" button. My task is to convert a .psd to html/css pixel perfect which is kind of dumb and results in bad code.
Fiddle: https://jsfiddle.net/emils/9g7cn7eh/
Buttons:
Button:
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
Styling:
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: -20px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: 8px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 15px solid #aecacc;
}
Add position: relative to the buttons, and use right/left to move the pseudo elements.
JSfiddle: link
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
position: relative; /* we need this for the pseudo elements positioning */
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
/*margin-left: -20px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -15px;
/*margin-left: 8px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #aecacc;
}
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View Basket</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View All (15)</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">Checkout</button>
</div>
I have no idea why my triangle pseudo-element gets cropped. I've been playing around the properties, but no result. It is supposed to be a classical triangle, where's my right angle?)
Please, help!
JSFiddle
<div id="slider">
<ul id="list">
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</div>
#slider {
border: 1px solid #999;
position: relative;
width: 195px;
}
#slider:after {
content: " ";
border-bottom: 14px solid transparent;
border-left: 14px solid black;
border-top: 14px solid transparent;
height: 14px;
left: 190px;
position: absolute;
top: 20px;
width: 14px;
}
It doesn't get 'cut off'. Your element has height which elongates the left hand border:
Your arrow is more 'stretched' vertically than it is 'cut off' horizontally.
Ensure your element has no height to it:
#slider {
border: 1px solid #999;
position: relative;
width: 195px;
}
#slider:after {
content: " ";
border-bottom: 14px solid transparent;
border-left: 14px solid black;
border-top: 14px solid transparent;
/* ----- */
height: 0;
font-size: 0;
/* ----- */
left: 190px;
position: absolute;
top: 20px;
}
<div id="slider">
<ul id="list">
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</div>
Also note your 'width' style is redundant. The triangle is created by the border and the content box itself is 'invisible'.
I'm currently trying to use this CSS to set up a wraparound banner type deal on a website theme I'm working on:
http://asgeirhoem.no/ex/css-wraparound-ribbon/
I've pretty much copied verbatim what's shown on the mentioned site:
(CSS)
header {
position: relative;
margin: 0 -10px;
text-align: center;
padding: 10px;
background-color: #bb0000;
color: white;
text-shadow: 2px 2px 0 black;
}
header:before,
header:after {
content: '';
border-top: 10px solid #660000;
position: absolute;
bottom: -10px;
}
header:before {
border-left: 10px solid transparent;
}
header:after {
border-right: 10px solid transparent;
}
(HTML)
<body>
<div class="page-container">
<header>
<img src="logo1.png" />
</header>
</div>
</body>
But it's not working as expected. This is what I'm getting when I look at the page in a browser:
As you can see, the "wraparound" sections exist, but are not positioned correctly, and I'm not sure why that is. Any help would be fantastic.
You missed the left and right property:
header:before {
border-left: 10px solid transparent;
left: 0;
}
header:after {
border-right: 10px solid transparent;
right: 0;
}
jsFiddle
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}