I wanted a curved edge triangle in css3.Is it possible to get it in css3 ?
My code below has a normal triangle...
http://jsfiddle.net/dVbJr/
#left-triangle {
width: 0;
height: 0;
border-right: 100px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
I wanted like this..
You can do like this:
CSS
.arrow{
width:50px;
height:100px;
position:relative;
overflow:hidden;
}
.arrow:after{
content:'';
width:100px;
height:100px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
background:red;
position:absolute;
top:0;
right:-70px;
border-radius:10px;
-moz-border-radius:10px;
}
HTML
<div class="arrow"></div>
Check this http://jsfiddle.net/dVbJr/4/
Related
I have found on this website a example that fits my needs except one thing. If i add hover, the left and right triangles will have the same colour instead of the new hover colour. Any idea how to have black triangles when we hover over rectangle?
.yourButton {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:blue;
text-align:center;
line-height:40px;
}
.yourButton:hover {background-color:black}
.yourButton:before {
content:"";
position: absolute;
right: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-right:40px solid blue;
border-bottom:20px solid transparent;
}
.yourButton:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid blue;
border-bottom:20px solid transparent;
}
<div class="yourButton">You wanted this?</div>
You need to make 2 different hover class for :after and :before and change the border color.
.yourButton {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:blue;
text-align:center;
line-height:40px;
}
.yourButton:hover {background-color:black}
.yourButton:before {
content:"";
position: absolute;
right: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-right:40px solid blue;
border-bottom:20px solid transparent;
}
.yourButton:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid blue;
border-bottom:20px solid transparent;
}
.yourButton:hover:after{
border-left:40px solid #000;
}
.yourButton:hover:before{
border-right:40px solid #000;
}
<div class="yourButton">You wanted this?</div>
I have a div that is a circle. I want to add a border around it that only wraps 3/4th of its circumference. Example :
my code so far:
<div id="Circle"></div>
#Circle {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 3px solid #01542c;
z-index: 9;
padding:50%;
}
https://jsfiddle.net/pm97beyx/1/
My current solution involved making a div on top of it then positioning it as a mask to hide the border underneath, very crude I would say.
Just make the border-top transparent:
#Circle {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 10px solid #01542c;
border-top:10px solid transparent;
z-index: 9;
padding:50%;
}
Result:
JSFiddle Demo
I want to create a stylized border with CSS3 like the below image. But, I don't know how? Here is the image:
Like this: http://nicolasgallagher.com/pure-css-speech-bubbles/
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #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 type="text/css">
.comments .comment{
width:10%;
margin-bottom:20px;
}
.comments .comment p{
margin:0 0 10px 0;
}
.bubble{
position:relative;
background-color:#CCC;
padding:20px;
color:#009;
border-radius:3px;
margin-left:20px;
}
.bubble::after{
content:"";
display:block;
position:absolute;
left:-15px;
top:15px;
width:0px;
height:0px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:15px solid #CCC;
}
</style>
<div class="comments">
<div class="comment bubble">
<p>This is comment</p>
</div>
</div>
you can use CSS3 box_round:
.box_round {
-webkit-border-radius: 5px;
border-radius: 5px;
}
try this site :)
I would like to create a tab or label like look using only CSS and no images if possible. Here is what I mean:
I can create one end but I have not been able to create the triangle point. Is it possible to do this with only CSS?
There are indeed ways to create CSS triangles, here's a part from css-tricks.com:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
http://css-tricks.com/snippets/css/css-triangle/
Yes, but not while supporting IE7:
<a class="tab">Your label text</a>
.tab {
background: black;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: relative;
}
.tab::before {
content: " ";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
border-width: 35px; /* play with this value to match the height of the tab */
border-style: solid;
border-color: transparent black transparent transparent;
}
This should be a good beginning
http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="arrow-left"></div>
<div class="arrow-body"></div>
CSS
.arrow-left { float:left; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; }
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}
Here is another one
<div></div>
div{
width:500px;
height:100px;
background-color:black;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-left:100px;
}
div:before{
width:0;
height:0;
content:"";
display:inline-block;
border-top:50px solid transparent;
border-right:100px solid black;
border-bottom:50px solid transparent;
position:absolute;
left:0;
}
http://jsfiddle.net/e8feE/
The image below describes the issue. I am creating our comment forms. And want to create the pointer arrow in ffffff background color, and a border of 1px aaaaaa and border bottom fff so it sits comfortably on our container div
The issue I have is I can make a solid color pointer, but not sure if I can make what I want, so thought I would ask here please.
The css for the pointer is:
div.comment-reply .arrow{
border-bottom: 8px solid #888;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
left: 30px;
line-height: 0;
position: absolute;
top: -8px;
width: 0;
}
#422; you can do with css like this rotate property.
css
#C{
height:200px;
width:200px;
background:red;
border:1px solid #000;
position:relative;
}
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
position:absolute;
bottom:-10px;
left:20px;
}
html
<div id="C"><span class="arrow"></span></div>
you can use :after, :before instead of span.
for IE you can use ie filter
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
CHECK THIS http://jsfiddle.net/sandeep/Hec3t/7/
Using some :before and :after magic, I was able to create this with the following code:
<div class="comment">
<div>
<p>Here is a comment</p>
</div>
</div>
__
.comment div:before {
content:"";
border:10px solid transparent;
border-bottom-color:#ccc;
width:0px;
height:0px;
display:block;
position:absolute;
top:-10px;
left:21px;
}
.comment div:after {
content:"";
border:12px solid transparent;
border-bottom-color:#fff;
width:0px;
height:0px;
display:block;
position:absolute;
top:-10px;
left:19px;
}
.comment {
position:relative;
margin:10px;
padding:10px;
}
.comment div {
padding:1em;
border:1px solid #ccc;
}
It's not perfect, but it avoids the need for an empty tag to contain your arrow.
Demo: http://jsfiddle.net/yGsKd/2/