I have a button that is supposed to show the tick icon on the top-right edge of the button, upon selected. Placing the tick icon partially over the button and partially out of the button seems to be a challenge. I was wondering if you can help me with this.
You can make top right circle with before element
button {
width: 100px;
height: 50px;
position: relative;
border-radius: 5px;
background-color: white;
border: 1px solid blue;
transform: translate(3rem, 3rem);
}
button:before {
content: attr(data);
width: 20px;
height: 20px;
border-radius: 50%;
background: skyblue;
border: 1px solid blue;
position: absolute;
top: -10px;
right:-10px;
display: flex;
justify-content: center;
align-items: center;
}
<button data="✓" class="badge-top-right">Button</button>
HTML
<button data="i" class="badge-top-right">Button</button>
CSS
button {
background-color: white;
width: 100px;
height: 40px;
border-radius: 5px;
border: 1px solid grey;
margin-top: 40px;
margin-left: 40px;
position: relative;
}
button:before {
content: attr(data);
width: 20px;
height: 20px;
line-height: 20px . ;
border-radius: 50%;
background: white;
border:1px solid grey;
color: black;
position: absolute;
top: -10px;
left: -10px;
right:-10px;
left:auto;
}
You can see the result here:
https://stackblitz.com/edit/angular-pjfn6t
Related
I'm trying to come up with a system where I can easily place a small circle at the top left and bottom right of a container element - an element that will be dynamic in size using flex or grid etc.
I managed to get the top-left circle appearing in the right place (c-tl) but I can't figure out how to get the bottom-right circle appearing at the other end of the border line.
I've tried messing around with different display types on different elements (e.g. the blue circle) and ::after selectors on various elements (e.g. the orange circle)... I'm sure there's an easy way but I'm certainly not a css expert!
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>
You can use position: absolute; with bottom: 0; and right: 0; to position the desired element on the bottom right corner of its parent element which must have position: relative;.
In your case:
the .c-tl and .c-br must be placed in .ele (the element relative which the circles are placed)
add position: relative; to .ele
add position: absolute; to both .c-tl and .c-br, and their corresponding top/bottom & left/right values set.
Reference (last example)
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
position: relative;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: absolute;
top: -5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
position: absolute;
bottom: -5px;
right: -5px;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<div class="ele">
<span class="c-tl"></span>
<p>Hello, world!</p>
<span class="c-br"></span>
</div>
</div>
I added the following to your c-br class.
float: right;
position: relative;
top: -5px;
right: -5px;
It seems to work in both views, including full screen.
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: orange;
display: block;
float: right;
position: relative;
top: -5px;
right: -5px;
}
.ele::after {
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
how to style chat-bubble in iphone classic style using css only
(4 answers)
CSS speech bubble with rounded arrow
(2 answers)
How to create a curve tail for speech bubble with CSS?
(1 answer)
How to make a box with arrow in CSS?
(7 answers)
Closed 2 years ago.
I want to create chat icon using css only. Here's a sample of it:
I don't want to use bootstrap chat icons because it's hard to customize especially the numbers inside the icon grows.
This is a bit like what you have in your request.
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 35%;
width: 3px;
height: 7px;
transform: rotate(-45deg);
}
.msg1:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 48%;
width: 3px;
height: 7px;
transform: rotate(45deg);
}
.msg2:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 35%;
width: 3px;
height: 6px;
transform: rotate(-45deg);
}
.msg2:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 40%;
width: 3px;
height: 6px;
transform: rotate(45deg);
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>
second solution:
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
top: 100%;
left: 33%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
.msg2:after {
content: '';
position: absolute;
top: 100%;
left: 25%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>
.chat-icon {
color: #161616;
position: relative;
height: 30px;
width: 60px;
font-size: 1.4rem;
}
.balloon {
display: flex;
position: absolute;
justify-content: center;
border: 2px solid red;
align-items: center;
background-color: white;
border-radius: 2rem;
height: 20px;
width: 100%;
z-index: 2;
}
.stick {
width: 20px;
position: absolute;
height: 8px;
background-color: red;
margin-left: 0.5rem;
transform: rotate(45deg);
top: 15px;
}
<div class="chat-icon">
<div class="balloon">10</div>
<div class="stick"></div>
</div>
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I'm having trouble making the below layout look the same across all browsers:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
}
<fieldset class="wrapper">
<legend>Legendary!</legend>
<div class="icon">icon</div>
</fieldset>
The problem is that when the legend element is present, the div.icon is pulled few pixels down on firefox, and a few pixels up on chrome. When I remove the legend element, it's working fine, but I can't do that. Any ideas on how to make it look the same everywhere?
here you have a working UPDATED :jsfiddle tested in chrome and firefox.
You don't need to work with position:absolute; you can just float:right; your div and give margin-top:-40px; or whatever value you want.
#wrapper{
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
#icon{
float:right;
background-color:#fff;
width:40px;
height:40px;
border:1px solid black;
margin-top:-20px;
margin-right:20px
}
legend#title {
margin-left: 20px;
float: left;
padding-left: 10px;
margin-top: -10px;
background: #f3f5f6;
width: 74px;
}
.icon {
float: right;
margin-top: -30px;
width: 40px;
height: 40px;
border: 1px solid black;
background-color: white;
}
tested on chrome as well as mozilla.
Try giving top value in percentage %.
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -2.5%;
right: 10px;
}
Fiddle here: https://jsfiddle.net/37y8023g/
Use line-height for .icon
CSS:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
line-height: 40px;
}
Working example: https://jsfiddle.net/qjqv43y4/1/
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.