I want to achieve this
But using this css
border-left: 3px solid red;
border-radius: 3px;
It is producing this result
plz ignore spacing, i will add that
I would recommend using pseudo-classes in order to create your red bar. Try this:
span {
font-family: Arial;
font-size: 3em;
}
span::before {
content: "";
display: inline-block;
margin-right: 10px;
width: 10px;
height: 40px;
border-radius: 50px;
background-color: red;
}
<span>2.1 Cr</span>
Use border-top-left-radius and border-bottom-left-radius
.div{
margin-top:40px;
width:50px;
height:10px;
border-radius:50px;
background:red;
transform:rotateZ(90deg);
}
<div class="div"></div>
Edited:
try this
Fiddle file:
https://jsfiddle.net/swuzqpbt/
htmlelement {
position: relative;
height: 40px;
border: none;
margin: 20px auto;;
}
htmlelement ::before {
content: '';
display: inline-block;
background: red;
width: 5px;
height: 40px;
top: 0;
left: 0;
border-radius: 140px;
position: absolute;
border:none;
}
Related
I'm trying to achieve the border that looks like the image when on hover:
I'm not sure how to describe the border. But any ways to achieve this ?
.text {
width: 100px;
height: 20px;
text-align: center;
}
.text:hover {
border: 1px solid black;
}
<div class="text"> Sample </div>
Using hover with before and after
.text {
position: relative;
width: 100px;
height: 20px;
text-align: center;
}
.text:hover::before,
.text:hover::after {
content: '';
position: absolute;
border: 1px solid black;
border-bottom: 0;
width:100%;
left:0;
height: 20%;
}
.text:hover::after {
bottom: 0;
border: 1px solid black;
border-top: 0;
}
<div class="text"> Sample </div>
You can add ::before and ::after selectors with the same background of the div (here, by default, white) to overwrite the border as follows.
.text {
width: 100px;
height: 20px;
text-align: center;
position: relative;
}
.text:hover {
border: 1px solid black;
}
.text:hover::before,
.text:hover::after {
content: " ";
position: absolute;
background: white;
top: 5px;
height: 10px;
width: 1px;
}
.text::before {
left: -1px;
}
.text::after {
right: -1px;
}
<div class="text"> Sample </div>
A simple border-image can do the trick
.text {
display:inline-block;
padding:10px;
text-align: center;
font-size:25px;
border:2px solid transparent;
}
.text:hover {
border-image: linear-gradient(#000 30%, transparent 0 70%,#000 0) 2;
}
<div class="text"> Sample </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/
I have a problem with my css bubble. Can you help me please where I have missing. I must have missed a point I do not know.I have tried with z-index, but still not working.but I have to tell you this overflow: hidden I had to use. This is demo: CodePen
This is HTML code:
<div class="container">
<div class="bubble">
</div>
</div>
And this is CSS code:
.container{
float:left;
width:500px;
height:auto;
margin-left:100px;
margin-top:100px;
border:1px solid d8dbdf;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
}
.bubble
{
position: relative;
width: 550px;
height: auto;
overflow:hidden;
padding: 15px;
background: #f4f4f4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #d8dbdf solid 1px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -5px;
left: 22px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -6px;
left: 22px;
}
You could set overflow: hidden; to the <form> tag inside the bubble instead of .bubble.
You could also use a clearfix when you can't, or don't want to, use overflow: hidden;. Since you use both before and after on .bubble already you still need to apply it to the <form> tag.
.clearfix:after {
content: '';
display: table;
clear: both;
}
Codepen example with clearfix
If I use like this :
a{
background: url('path') no-repeat left center;
padding-left: 50px;
border-bottom: 2px dashed;
}
this will produce like ths:
but if I use margin-left: 50px; this will produce like this:
How can I make like this:
Your HTML have to be like this
<span>some text</span>
so you can style your link and your text separately
a{
background: url('path') no-repeat left center;
padding-left: 50px;
}
a span {
border-bottom: 2px dashed;
}
Try this:
a {
border-bottom: 2px dashed;
text-decoration: none;
margin-left: 50px;
}
a:before {
content: "";
position: absolute;
background: url('path') no-repeat left center;
width: 50px;
height: 25px;
margin-left: -45px;
}
Also, check the demo.
Check this fiddle:
http://jsfiddle.net/GCpQa/
a {
border-bottom: 2px dashed;
margin-left: 40px; /* play with this margin as you want */
position: relative;
font-size: 24px;
font-weight: bold;
}
a:before {
position: absolute;
content:'';
width: 30px; /* image width */
height: 30px; /* image height */
background: #ff0000; /* put you image background here */
left: -40px; /* play with this position as you want */
}
Use :before, and remove border bottom. Something like this:
a {
padding-left: 40px;
display: inline-block;
position: relative;
border-bottom: 2px dashed;
}
a::before {
content: "";
width: 40px; height: 100%;
background: url('path') no-repeat left center;
display: inline-block;
border: none;
position: absolute;
top: 0; left: -40px;
}
Demo: http://jsfiddle.net/Mn2Wg/