I want to ask how can i create a css arrow triangle with smooth sides i.e. no cut in the side of arrow without using any image? I have already tried the tutorial -
[http://css-tricks.com/snippets/css/css-triangle/][1]
.arrow_up
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
position:absolute;
top:75px;
left:250px;
}
<div class="arrow_up"></div>
UPDATE
Sorry, the issue was found only in some older version of Firefox.
You need to use a pseudo element and rotate it:
DEMO
CSS:
.arrow_up
{
width: 100px;
height: 50px;
position:absolute;
top:150px;
left:250px;
overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
content:'';
position:absolute;
width:100%;
padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
transform:rotate(45deg);/* we'll see a corner */
background:black;
top:20px;/* tune this according to size of parent or size to be seen */
}
Do not forget to add vendor-prefix or use a script that adds them automaticly.
The use o a pseudo element allows to add content in the box : ie. http://codepen.io/gc-nomade/pen/gdoGA
The only thing I can possibly think of is that you have another element on the page which is slightly overlapping onto the arrow as when tested it works fine:
http://jsfiddle.net/Hive7/qLAg4/
.arrow_up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
position: absolute;
top: 75px;
left: 250px;
}
It could be something to do with your browser as well though
Related
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
I found a code drawing a 6-point star:
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
now I need to place this picture inside the Button element.
should look like a real button with 6-point start on the left side.
|*Button| Like this :)
Try including a div inside of a tag - something like this code here:
<button onclick="sayHello();"><div id="star-six"> </div></button>
http://jsfiddle.net/53mHn/
Updated:
If you want the star on the left, create two divs inside of your button, one for the star and one for your text. Set the width of the star div to be 50px (or whatever the star width is) and set the float: to left.
<button onclick="sayHello();"><div class="star-content star-icon" id="star-six"> </div><div class="star-content">This is the text inside of my button</div></button>
Css is here:
.star-icon {
width: 50px;
float: left;
}
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/
However, this removes 25% or the border, How do I remove just 5% or say 20% ?
Also, how do I rotate the border (without rotating the content inside)?
Code in jsfiddle:
HTML:
<div class="one">
<div class="two">4.5</div>
</div>
CSS:
.two {
font-size: 24px;
display:inline;
padding-bottom:5px;
}
.one {
padding: 10px;
border: 1px solid green;
border-radius: 25px;
border-top-color: transparent;
width:30px;
margin-left: 10px;
}
Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT
Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/
I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:
#f {
z-index: -1;
}
http://jsfiddle.net/5MZMj/199/
Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/
:after {
display: inline-block;
content: "";
border-left: 10px solid transparent;
border-top: 25px solid #fff;
border-right: 10px solid transparent;
border-top-color: #fff;
position: absolute;
margin-top:-42px;
margin-left: -5px;
}
Editing margin-top, margin-left and border-right changes the amount of arc to be removed.
[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]
I didn't get you all, but may be this is the answer.
#f
{
right:-93px;
}
http://jsfiddle.net/7zDNK/
You can specify the radius for each corner if that what you mean:
border-radius: 5px 10px 15px 20px;
Starting with the top-left corner and going clockwise.
If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle.
http://jsfiddle.net/5MZMj/201/
#f {
right: -85px;
top: -85px;
}
Is it possible to somehow create the following in CSS? (See attached image)
What i want to achieve is to be able to change the background-color of the bubble with CSS.
One solution would be to save the background bubble in a bunch of different colors and depending on the color chosen display the correct background image. However this would not be as dynamic as i wish.
Any ideas here?
Something like this was done over at CSS Tricks using pseudo-elements. The only limitation I can think of or foresee is the border that goes around the object... CSS Round-out borders
Using the :after and :before pseudo elements I was able to take the same concept and apply it to create your shape. Again... The only catch is the border. Also... it requires the background behind it to be solid, so that you can mimic the background color... No patterns or transparency here. Try changing the colors of the :after and :before elements and you'll see how its done.
JSFiddle Example
<div class="bubble">
<span>Some Text</span>
</div>
body { background: #999;}
.bubble {
position: relative;
width: 150px;
height: 60px;
border-radius: 10px 10px 0 10px;
border: 1px solid #fff;
background: #444;
}
.bubble:before {
content: " ";
position: absolute;
width: 30px;
height: 30px;
bottom: 0;
right: -30px;
background: #444;
}
.bubble:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
right: -60px;
background: #999;
border-radius: 100%;
}
The other options are nice css approaches but with the border on a shape like that will not be possible with just css.
In my approach I am going to use an svg image.
This is a path in the image and as you can see classes and ids are possible to use on an svg image.
<path class="bubBg" fill="#7C7C7C"
Here is a JSFIDDLE you can play around with.
(currently I believe this is the best option to have that exact design but Michael's answer is pretty good)
Here's what I did: Not exactly the same bubble but similiar, Check it out
Fiddle: http://jsfiddle.net/zD3bV/1/
CSS
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
top: 2px;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#talk-bubble {
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talk-bubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent;
}
Also, search for css shapes you'll more likely to get the best results and then you can modify them according to your needs