I'm creating a system where users can add some products to their cart and I want them to be able to add some items with a up-arrow and a down-arrow. These arrows are to the right of some text. I've prepared a JSFiddle with the current setup:
FIDDLE
the html:
<p>1</p>
<div class="addbutton"></div>
<div class="minbutton"></div>
and the css:
p {
display: inline-block;
margin: 0;
}
.addbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
display: inline-block;
}
.minbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
display: inline-block;
}
Now I want the arrows to be on top of each other (with a little margin between them) but I can't seem to figure out how to do it. Could anyone help me to accomplish this?
Thanks!
Add position: absolute; to your .addbutton class. This way it stays it's place, but allows the next element to be rendered on the same position. Here's your fiddle
change you .addbutton class to block instead of inline-block
.addbutton {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
display: block;
}
Related
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>
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
I'm trying to create a shape in menu header which indicates that is selected (active class), but I can't bring the shape up and align it.
This is what I've tried:
HTML
<li class="active">Market</li>
CSS
.active {
z-index: -1;
position: absolute;
border-bottom: 2px solid #b6ff00;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
EXPECTED RESULT:
JSFIDDLE: http://jsfiddle.net/Q2Dra/
You're on the right track with the border. You just needed to apply it to a pseudo element instead of the li.
Full Example:
http://jsfiddle.net/Q2Dra/4/
Relevant Code:
.active:after {
content:'';
border:10px solid transparent;
border-bottom:10px solid #b6ff00;
position:absolute;
bottom:0;
left:50%;
margin-left:-10px;
}
You need to use a psuedo element: http://jsfiddle.net/webbymatt/QL7Qr/
HTML
Home
CSS
a {
position: relative;
background: red;
padding: 6px 10px;
}
a:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: " ";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
}
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 making a website for death metal promos and was wondering if it was possible to make a pentagram in CSS3 using border attributes. I was able to find some references that lead me to believe it was possible to make a six-point star, but after several hours of mental torment I have given up on making a 5 point star. Is this possible?
A hexagram consists of two triangles and thats how css3 can pull it off with the following code:
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid black;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid black;
margin: 30px 0 0 -50px;
}
But it gets confusing with 5 points because it can't be broken up into smaller polygons. Any knowledge as to how I could implement this would be great.
http://jsfiddle.net/8FjL2/1/
http://www.skinit.com/assets/seo/jumbo_shot/jumbo_shot50039084/pentagram.jpg
solution to what has been asked here
Fiddle
<div id="pentagram"></div>
#pentagram {
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-bottom: 80px solid black;
top:100px;
left:50px;
}
#pentagram:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-top: 80px solid black;
-webkit-transform: rotate(34deg);
margin:6px 0 0 -122px;
}
#pentagram:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 120px solid transparent;
border-bottom: 120px solid transparent;
border-right: 80px solid black;
-webkit-transform: rotate(15deg);
margin:-74px 0 0 -42px;
}
Well by doing a little bit of Googling, I found this site. By fiddling around a little bit (I pressed F12), I found this:
HTML:
<div id="pentagram">
<div id="star_1"></div>
<div id="star_2"></div>
<div id="star_3"></div>
<div id="star_4"></div>
<div id="star_5"></div>
</div>
CSS:
#pentagram{margin:0 auto;margin-top:45px;margin-bottom:75px;height:500px;width:500px;border-radius:500px;border:5px solid #bb0000;position:relative;}#pentagram div{position:absolute;background:#bb0000;width:476px;height:5px;}
#star_1{top:328px;left:12px;}
#star_2{top:183px;left:-38px;transform:rotate(-37deg);-ms-transform:rotate(-37deg);-webkit-transform:rotate(-37deg);}
#star_3{top:183px;right:-38px;transform:rotate(37deg);-ms-transform:rotate(37deg);-webkit-transform:rotate(37deg);}
#star_4{top:268px;right:-60px;width:480px !important;transform:rotate(107deg);-ms-transform:rotate(107deg);-webkit-transform:rotate(107deg);}
#star_5{top:268px;left:-60px;width:480px !important;transform:rotate(-107deg);-ms-transform:rotate(-107deg);-webkit-transform:rotate(-107deg);}