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>
Related
I am currently experimenting on CSS shapes and I am making an icon that forms like a circle with a NECKTIE. I am combining 2 different triangles but it's really hard to form because I am really bad at imagining shapes and forms.
Here is my source code:
.upper {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 22px solid #353332;
transform: rotate(76deg);
position: relative;
}
.upper::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 14px solid #EEE328;
transform: rotate(0deg);
top: 5px;
bottom: 9px;
left: -7px;
}
.lower {
width: 0;
height: 0;
border-bottom: 27px solid #353332;
border-right: 17px solid transparent;
transform: rotate(-31deg);
margin-top: -17px;
margin-left: 14px;
}
.lower::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 27px solid #EEE328;
border-right: 17px solid transparent;
transform: rotate(-31deg);
transform: rotate(0deg);
top: 5px;
bottom: 9px;
left: -7px;
}
<div class="neck-tie">
<div class="upper"></div>
<div class="lower"></div>
</div>
I put everything in a container. The .upper class is the bigger triangle with 3 equal sides and the .lower class is the longer one. I added a ::before in each of the classes since I wanted it to be bordered.
My main div is rotated 19deg. I'm not posting everything in here so that you can understand how my code works. I will just explain what's inside my files.
Just playing around I came up with this it isn't anything like your code but I think I captured what you want. I used several divs with absolute positioning and rotated 3 divs one to give the appearance of the upper portion of the tie and 2 to give the appearance of the lower portion.
.tieContainer{
width:100px;
height:250px;
position:absolute;
left:50%;
margin-left:-50px;
top:10px;
overflow:hidden;
transform: rotate(180deg);
}
.tieTopContainer{
width:100%;
height:60px;
overflow:hidden;
}
.tieTop{
width:60px;
height:160px;
transform: rotate(45deg);
overflow:hidden;
background-color:yellow;
margin-left:-20px;
margin-top:15px;
border:5px black solid;
}
.tieBottomContainer{
width:100%;
height:134px;
overflow:hidden;
}
.tieBottom{
width:70px;;
height:170px;
background-color:yellow;
margin-left:16px;
}
.trimRight{
width:80px;
height:152px;
position:absolute;
transform: rotate(15deg);
background-color:#ffffff;
border-left:6px black solid;
margin-left:67px;
margin-top:7px;
}
.trimLeft{
width:80px;
height:152px;
position:absolute;
transform: rotate(-15deg);
background-color:#ffffff;
border-right:6px black solid;
margin-left:-52px;
margin-top:7px;
}
.knotCon{
width:40px;
height:30px;
overflow:hidden;
border-bottom:5px black solid;
position:absolute;
left:50%;
margin-left:-20px;
}
.knot{
width:60px;
height:160px;
transform: rotate(45deg);
overflow:hidden;
background-color:yellow;
margin-left:-50px;
margin-top:9px;
border:5px black solid;
}
<div class="tieContainer">
<div class="tieTopContainer">
<div class="tieTop"></div>
</div>
<div class="tieBottomContainer">
<div class="trimRight"></div>
<div class="trimLeft"></div>
<div class="tieBottom"></div>
</div>
<div class="knotCon">
<div class="knot"></div>
</div>
</div>
I am wondering, is there a way to create shadow linke on the images below (possibly using pseudo class?)
The red bit behind grey box meant to be shadow with trapeze shape and no blur.
Now idea if its possible?
Thank you for your help in advance.
DEMO 1:
HTML:
<figure></figure>
CSS:
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 14px 0 -10px red;
}
figure:before, figure:after{
content:'';
position:absolute;
top: 2px;
width:0;
height:0;
}
figure:before{
left: -5px;
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-top: 77px solid red;
}
figure:after{
right: -5px;
border-left: 0px solid transparent;
border-right: 5px solid transparent;
border-top: 77px solid red;
}
DEMO 2
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 12px 0 -10px red;
}
figure:before{
content:'';
position:absolute;
top: -10px;
left: 0;
width:100%;
height:100%;
background:red;
z-index: -1;
-webkit-transform-style: preserve-3d;
-webkit-transform: perspective(800) rotateX(-40deg);
}
Just in case of using CSS3 features, you could create a trapeze by applying a transform on a pseudo-element and position that behind the box as follows:
EXAMPLE HERE
.box {
width: 200px; /* Optional */
/* height: 150px; */ /* Optional */
position: relative;
}
.box:before {
content: "";
position: absolute;
background-color: lightgray;
top: -3%; bottom: -12%; left: 0; right: 0;
transform: perspective(50em) rotateX(-30deg);
z-index: -1;
}
Therefore dimensions of the shadow box would be relative to the box. However it is not supported in IE 9 and below.
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/
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/
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/