I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
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>
I've tried making a fieldset with the react app but it seemed difficult so i managed to make it look like with some css, and now i'm pretty curious about how to border the comlpete box just like this
<div class="fieldset">
<div class="legend">Text</div>
Text2
</div>
Customised Styles:
.fieldset{
width: 200px;
height: 300px;
border: 1px solid black;
padding: 30px;
margin: 30px;
position: relative;
}
.legend{
font-size: 45px;
position: absolute;
top: -8%;
left: 50%;
transform: translate(-50%);
background: #fff;
}
this way you can goes near your goal.
Hope it's work for you.
.fieldset{
border: 1px solid black;
padding: 30px;
margin: 100px 30px 30px;
position: relative;
font-size: 45px;
width: 200px;
border-radius: 10px;
}
.legend{
position: absolute;
width: fit-content;
top: -74px;
left: 0;
right: 0;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
border-bottom: 1px solid #fff;
border-radius: 10px 10px 0 0;
}
<div class="fieldset">
<div class="legend">Title</div>
Content
</div>
I'm trying to draw a circle with tick/checkmark inside it using pure css3
.success-checkmark {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
How can i achieve i have tried with the above code?
You can use content: '✔'; only on pseudo elements, so try using the following selector:
.success-checkmark:after {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
position: relative;
background: #00B01D;
border-radius: 100%;
height: 120px;
width: 120px;
}
.checkMark {
position: absolute;
transform: rotate(50deg) translate(-50%, -50%);
left: 27%;
top: 43%;
height: 60px;
width: 25px;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
}
<div class="wrapper">
<div class="circle">
<div class="checkMark"></div>
</div>
</div>
I found a template online to which I made modifications. Kindly check if this works for you.
:root {
--borderWidth: 7px;
--height: 25px;
--width: 12px;
--borderColor: white;
}
body {
padding: 20px;
text-align: center;
}
.check {
display: inline-block;
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--borderColor);
border-right: var(--borderWidth) solid var(--borderColor);
}
.behind {
border-radius: 50%;
width: 40px;
height: 40px;
background: black;
}
<div class="behind">
<div class="check">
</div>
</div>
css
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
}
vertical adjustment
line-height:20px;<--- adjust vertical alignment
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
width: 90px;
height: 90px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></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 am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}