Is it possible to create a complete arrow using CSS?
This is how I create just the head of the arrow: http://jsfiddle.net/2fsoz6ye/
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
}
But I also need the back part of the arrow. Just to look like this:
And after this I want to rotate the CSS-arrow, so I would be able to use it dynamically... i.e. pointing to the top, left, 45°...
Just have a look at this fiddle: http://jsfiddle.net/2fsoz6ye/2/
.container{
transform: rotate(30deg);
width:60px; height:40px; background:#ccc; margin:100px auto;}
.arrow-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}
Related
I have realized a dropdown menue with a triangle at the top like this:
Now, when the cursor only rolls over the triangle it looks like this:
But if the cursor is over the div the rollover-effect for both gets triggered like this:
I want the hover-effect for both elements triggered, when the cursor moves over the triangle as well. Can someone tell me what I am doing wrong here?
This is my CSS:
.msg_archivedropdown {
position: absolute;
color: #fff;
left: 40px;
top:0%;
background-color: #659DBD;
z-index: 100;
display:none;
border-radius: 2px;
border-top-left-radius: 0px;
box-shadow: 1px 1px 1px #000000;
}
.msg_archivedropdown:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #659DBD;
}
.msg_archivedropdown:hover::before {
border-right:7px solid #fff;
color: #659DBD;
}
.msg_optiondropdownpoint {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
}
.msg_optiondropdownpoint:hover {
background-color: #fff;
color: #659DBD;
}
Just use a gradient to fake the empty space on the left. Then position your ::before element just inside the parent. Just keep in mind that you need to double the padding on the left to complete the visual trick:
Codepen Demo
HTML:
<div class="parent-element">
<p>
I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.
</p>
</div>
CSS:
.parent-element{
background:deeppink;
background: linear-gradient(to left, deeppink calc(100% - 16px), rgba(0,0,0,0) 10%);
padding:16px;
padding-left:32px;
width:320px;
border-radius:4px;
color:white;
position:relative;
margin:48px auto;
}
.parent-element:hover{
background: linear-gradient(to left, deepskyblue calc(100% - 16px), rgba(0,0,0,0) 10%);
}
.parent-element::before{
content:'';
display:block;
position:absolute;
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 16px;
border-bottom-width: 16px;
border-right: 16px solid deeppink;
top:calc(50% - 8px);
left:0px;
}
.parent-element:hover::before{
border-right: 16px solid deepskyblue;
pointer-events:auto;
}
I have no idea how can I put an arrow in the same color of my div pointing to the IMAGE text.
Some ideas? how can I do this?
https://jsfiddle.net/fvvrLqLp/
#arrow{
background-color:#FFD600;
color:#fff;
border-radius:15px;
padding:5px;
z-index:999;
max-width:150px;
}
html:
image<br><br>
<div id="arrow">
text
</div>
thank you friends!
I suppose you're looking for something like that:
#arrow {
background-color: #FFD600;
color: #fff;
border-radius: 15px;
padding: 5px;
z-index: 999;
max-width: 150px;
position: relative;
}
#arrow:before {
position: absolute;
top: -10px;
left: 20px;
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #ffd600;
}
An example: https://jsfiddle.net/fvvrLqLp/1/
You need to create the triangle with css into a pseudo element and position it accordingly to the needed position.
I am trying to represent my HTML/CSS tab like on the picture.
I have already tried lots of things with border-radius without any success.
Do you have any tracks so that I can reproduce my tabs like the picture only with CSS?
In order to make the same borders (also inside the triangles) as in the image, you can use pseudo elements and transform rotate :
DEMO
output :
HTML :
<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>
CSS :
div{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-right:12px;
line-height:50px;
float:left;
width:200px;
position:relative;
z-index:0;
text-align:center;
}
div:after,div:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:#fff;
z-index:999;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div:before{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
top:0; left:-12px;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
}
div:after{
border-left:1px solid #ccc;
border-top:1px solid #ccc;
bottom:0;
right:4px;
-ms-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
display:none;
}
You could that with css only but with an empty span (If you would like to have half triangles in the edges):
HTML
<ul>
<li><span></span>one</li>
<li><span></span>two</li>
<li><span></span>three</li>
</ul>
CSS
ul {
font-size: 0;
}
li {
background: red;
display: inline-block;
padding: 30px;
font-size: 15px;
position: relative;
}
span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
li:after {
width: 0;
height: 0;
border-top: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
top: 0;
content: "";
}
li:before {
width: 0;
height: 0;
border-top: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
top: 0;
content: "";
}
span:before {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
bottom: 0;
content: "";
}
span:after {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
bottom: 0;
content: "";
}
An example: http://jsfiddle.net/fC9Fs/
Here is another take on it:
This one works with a basic list and no other HTML is needed.
Also as you've shown in your image, the first and last elements do not have the arrow.
Fiddle
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
html, body{
background:#E5E2E2;
}
ul{
display:inline-block;
list-style-type:none;
border:1px solid #CCCCCC;
padding:0;
}
li{
float:left;
padding:10px 15px;
background:#F4F4F4;
position:relative;
}
li:nth-child(n+2):before{
content:'';
position:absolute;
left:-5px;
top:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #e5e2e2;
}
li:nth-child(n+2):after{
content:'';
position:absolute;
left:-5px;
bottom:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #e5e2e2;
}
You can do this with an octagon shape, as shown in this link.
The relevant code:
#octagon { width: 100px; height: 100px; background: red; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
You can edit the borders from the above code to get the exact shape you want.
I come with another pseudo options that allows to cut corners and allow to see main background behind: DEMO
Borders can be done too : DEMO with borders
The method is to draw background-color from box-shadow on rotated pseudo-elements wich basic border triangle cannot achieve. Pseudo element can take almost any shapes from radius and transform ... if that gives some ideas :)
I want to be able to skew an element in the way the image displays below.
I have been playing around with it, but dont seem to be able to get close to replicating that shape.
My css code is
transform:skew(30deg,30deg);
Is transform even the right way to do this? Please let me know the best, most browser compatible, solution.
You can apply some rotate transform around the X axis and apply an appropriate pespective before:
div {
width:300px;
height:200px;
background:url(http://placekitten.com/300/200);
border:2px solid red;
border-top-width:4px;
border-bottom-width:1px;
-webkit-transform: perspective(200px) rotateX(40deg);
margin:100px;
}
Demo
Try this:
Html
<div class="trapezium"></div>
StyleSheet
.trapezium {
border-bottom: 80px solid #fff;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
height: 0;
width: 120px;
position: relative;
margin: 2em auto;
}
.trapezium:before {
border-bottom: 90px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
padding: 0 8px 0 0;
height: 0;
width: 130px;
position: absolute;
bottom: -85px;
left: -55px;
content: "";
z-index: -1;
}
Here is the Demo
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/