I am having trouble getting the triangle left to display as I desire. I would like to make the following snippet to be a triangle left instead of a square tilted 135 degrees. Help is greatly appreciated!
Codepen snippet
/*
Like Count Box
*/
.like-count {
line-height: 1;
white-space: nowrap;
text-align: center;
padding: 3px 7px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
width: 60px;
background-color: inherit;
border: 1px solid #fff;
padding: 4px;
position: relative;
}
.like-count:after {
content: '';
display: inline-block;
position: absolute;
top: 5px;
left:-7px;
width: 10px;
height: 10px;
background: #fff;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
}
Instead of rotate the pseudo, you can use its borders to make a triangle.
/*
Like Count Box
*/
.like-count {
white-space: nowrap;
text-align: center;
padding: 3px 7px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
width: 60px;
background-color: inherit;
border: 1px solid #000;
padding: 4px;
position: relative;
}
.like-count:after {
content: '';
position: absolute;
top: -1px;
left: -11px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid black;
}
<br><br>
<div align="center">
<div class="like-count">33</div>
</div>
Related
I'd like to add a speech-bubble point on the top-right corner of my mat-menu-list but it doesn't seem to work. Is this possible?
I attempted wrapping the mat-menu-list with the below code:
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px;
padding: 0px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
left: 95%;
margin-left: -10px;
}
<div class="menuPoint"></div>
Are you looking for something like this? I just played a bit around with the position values, removed z-index from the pseudo-element and removed the border-radius from the top right corner where the pseudo-element is generated.
.menuPoint {
position: relative;
background: #143342;
color: #FFFFFF;
font-family: Arial;
font-size: 20px;
line-height: 120px;
text-align: center;
width: 250px;
height: 120px;
border-radius: 10px 0px 10px 10px;
padding: 0px;
/* for demo purpose */
margin-top: 50px;
}
.menuPoint:after {
content: '';
position: absolute;
display: block;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #143342 transparent;
top: -20px;
right: 0;
}
<div class="menuPoint">hey there!</div>
any idea how to do something like this?
i know they're just boxes with modifications to css but Im new to css so any kind of help would be useful. thank you
im doing this by doing the following below. But there is a space in between the boxes. I wanted to achieve the arrow covering the space between each box
.box {
display: block;
width: 100%;
margin: 0 auto;
padding: 50px 20px;
text-align: center;
overflow: hidden;
}
.box-item {
display: block;
position: relative;
float: left;
width: calc(100% / 3 - 7px);
height: 40px;
line-height: 40px;
margin-right: 10px;
padding: 0 10px;
background-color: #3a7cca;
border-radius: 4px;
color: #ffffff;
}
.box-item:before {
content: "";
position: absolute;
right: -9px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3a7cca;
border-radius: 4px;
}
.box-item:after {
content: "";
position: absolute;
left: -1px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #fff;
border-radius: 4px;
}
.box-item:first-child:after {
display: none;
}
.box-item:last-child {
margin-right: 0;
}
.box-item:last-child:before {
display: none;
}
Try to use display: flex and flex-direction: row-reverse for the parent block. So each next .box-item will be placed "under" the previous, and you will be able to adjust space between items by changing margin-right.
.box {
display: flex;
flex-direction: row-reverse;
padding: 50px 20px;
}
.box-item {
align-items: center;
background: #3a7cca;
border-radius: 4px;
color: white;
display: flex;
flex-grow: 1;
height: 40px;
justify-content: center;
margin-right: 2px;
position: relative;
}
.box-item:before,
.box-item:after {
border-color: transparent;
border-style: solid;
border-width: 20px 0 20px 10px;
border-radius: 4px;
content: "";
height: 0;
position: absolute;
top: 0;
width: 0;
}
.box-item:before {
left: -1px;
border-left-color: white;
}
.box-item:after {
right: -9px;
border-left-color: #3a7cca;
}
.box-item:first-child {
margin-right: 0;
}
.box-item:last-child:before,
.box-item:first-child:after {
display: none;
}
<div class="box">
<div class="box-item">3</div>
<div class="box-item">2</div>
<div class="box-item">1</div>
</div>
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
I am using the following code and want to add a triangle either in the css3 format or the image based
here is my css
<div id="middleMenu">
<span class="selected">
View Stuff
</span>
<span class="text">
View Gnen
</span>
</div>
Here is the css for the above
#middleMenu {
position: absolute;
width: 300px;
margin: 84px 40%;
padding-top: 5px;
color: #fff;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.traingle {
background: url(../images/arrow.png) no-repeat;
top: 31px;
left: 15px;
position: relative;
text-indent: -9999px;
}
#middleMenu span.selected {
background: url(../images/middleMenu.png) repeat;
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
.text {
top: 10px;
}
#middleMenu span {
color: white;
padding-top: 14px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 14px;
}
files added which help generating the arrow key
You can create a triangle in CSS like so:
#Triangle pointing upwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#Triangle pointing downwards
.div {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
}
jsfiddle.net/dPB75/2
I'm sure you can see where this is going to create one facing left or right.
You can change the size of the triangle by the width of the borders.
Also, you misspelled triangle