Hi I am trying to create a custom arrow in CSS that looks like the image below.
Ideally I want to create this by overlaying two shapes a triangle and a rectangle (maybe using CSS :after and :before) but I'm not too savvy when it comes to CSS so I have been struggling.I started by just using borders but doesn't look like it is going to work
So far I just have:
.arrow {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #ccc;
}
<div class="arrow"></div>
Not too hard to make using the :before pseudo element and some transforms:
.container {
padding: 100px;
}
.arrow {
display: inline-block;
height: 150px;
background: #000;
width: 75px;
}
.arrow:before {
content: "";
border-top: 100px solid #000;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
transform: rotateZ(180deg) translateY(100%) translateX(31%);
position: relative;
display: inline-block;
}
<div class="container">
<div class="arrow"></div>
</div>
Here's another option.
.arrow{
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #ccc;
position: relative;
margin: 0 0 0 100px;
}
.arrow::before{
content: "";
height:50px;
width:80px;
background: #ccc;
position: absolute;
top: 0;
margin: -100%;
display: block;
transform: translateX(-160%) translateY(-50%);
}
<div class="arrow"></div>
Create one rectangle and then add triangle on top with :before pseudo-element and that is it.
.arrow {
width: 36px;
height: 50px;
background: #3F3F3F;
position: relative;
margin: 60px;
}
.arrow:before {
content: '';
border-style: solid;
border-width: 0 40px 40px 40px;
border-color: transparent transparent #3F3F3F transparent;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
<div class="arrow"></div>
To explain and demonstrate:
A CSS arrow is created by coloring 1 border side, and then moving the other 3 sides in towards the middle of the shape as transparent so they don't show but cut the remaining colored side into a triangle. The shorthand for this is TOP RIGHT BOTTOM LEFT. So to make a triangle pointing upwards you use the third property or bottom.
Using pseudo elements (incase you want the arrow added to another element) you need content:'' to "create" the pseudo element. I've set them as display: block so that they are in the flow and interact with eachother (rather than being laid on top of one another).
By giving the rectangle position: relative you can then use left: 30px (half of the triangle width) to position it in the middle of the triangle.
.arrowWrapper:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 60px 60px;
border-color: transparent transparent black transparent;
/* border-color: TOP RIGHT BOTTOM LEFT; */
}
.arrowWrapper:after {
content: '';
position: relative;
display: block;
width: 60px;
height: 60px;
background: black;
left: 30px;
}
<div class="arrowWrapper"></div>
Lifted and modified from http://www.cssportal.com/css3-shapes/:
#eq-triangle {
width: 0;
height: 0;
border-bottom: 104px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#rectangle {
width: 40px;
height: 80px;
background: blue;
margin-left: 40px;
}
<div id="eq-triangle"></div>
<div id="rectangle"></div>
Related
I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...
div#ghostBox{
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 550px;
top: 270px;
}
Btw I am making a game of pac-man.
You can keep the use of only one element and rely on gradient:
body {
background: pink;
}
.box {
width: 170px;
height: 100px;
border: 5px solid white;
border-top: none;
background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">
</div
i think you want this (:
body{
background-color:black;
}
p{
color:white;
margin: 1px;
}
/* TEXT BOX */
div#ghostBox{
height: 100px;
width: 150px;
border: 2px solid white;
border-top: 5px solid white;
position: fixed;
left: 50px;
top: 50px;
color:red;
padding: 0px;
padding-top: 0px;
}
/* High text color line */
div#text{
border-top: 5px solid green;
position: absolute;
margin-top: 0px;
width: auto;
margin: 0px;
}
/* High color line after text */
div#notext{
border-top: 5px solid red;
margin-top: 0px;
width: auto;
margin: 0px;
}
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>
You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
background: red;
}
div#ghostBox:after {
content: '';
width: 50px;
border: 2px solid green;
position: absolute;
padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>
There may be better ways, but you could use a span at the beginning of the div:
Just set the border-top for the span and set its width:
(I removed the left and top properties for the example)
body {
background-color: red;
}
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
}
span {
border-top: 2px solid blue;
width: 50px;
position: absolute;
}
<div id='ghostBox'>
<span> </span> test
</div>
I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?
You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>
Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>
You could play with this, it has a border like your image http://www.cssarrowplease.com/
How would I achieve the following as seen in the image below, in the best way as possible? I want a thick top border, but as it goes down I want the sides to become thinner and just "mend" (if that's right expression) into the black block.
This is my CSS code for the black block:
.containerMain {
background: #000;
padding: 15px;
border-radius: 5px;
width: 250px;
}
You can use the after pseudo-element to position an upside-down trapezoid behind your element.
Look here for a trapezoid shape example.
body { padding: 30px; }
.containerMain {
background: black;
padding: 15px;
border-radius: 5px;
width: 250px;
height: 250px;
position: relative;
}
.containerMain:after {
content: '';
border-radius: inherit;
margin: -20px;
margin-top: -25px;
width: 100%;
height: 50%;
position: absolute;
z-index: -1;
/* upside-down red trapezoid props */
border-top-width: 150px;
border-top-style: solid;
border-top-color: red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
<div class="containerMain"></div>
I'm trying to make this image I found on Dribbble using Codepen.
I've made the bike, but I can't get the light.
I've tried several times using overflow:hidden and it isn't working.
Do you have an idea of how to do this?
What I'm trying to do is :
web here
Use triangles instead of a trapezium. You can cover the tip of said triangle with the light.
Tweak the numbers, but here's the general idea: http://jsfiddle.net/cZQmH/ http://jsfiddle.net/cZQmH/1/ (added browser compatibility)
<div class="light">
<div class="top triangle"></div>
<div class="bottom triangle"></div>
</div>
Where each "triangle" is actually just covering up the corner
.light { /* Just a big box. Where the magic happens*/
padding:50px 0px;
position: absolute;
background: -webkit-linear-gradient(left, rgba(255,255,255,1),rgba(255,255,255,1), rgba(255,255,0,0)); /* should add other compatibility things */
height: 75px;
width:200px;
}
.triangle {
width: 50px;
position: absolute;
left: 0;
}
.top { /*Covers top corner*/
top:0;
border-top: 100px solid #ff0;
border-right: 100px solid transparent;
}
.bottom { /* Covers bottom corner */
bottom:0;
border-bottom: 100px solid #ff0;
border-right: 100px solid transparent;
}
The final CSS is a bit verbose, but if you're using LESS or SASS it should come out pretty cleanly.
What it comes down to is not using the border itself, but using a gradient negative image. You could experiment with the border-image it's just as well supported as Gradients but I came up with this solution first. It does look like it's possible however
Also: could you post a link to the completed bike? I'd be curious to see how you handle all of those curves.
html
<div class="light">
<div id="trapezoid"></div>
<div id="trapezoid-two"></div>
</div>
css
.light{
background-color: yellow;
width: 400px;
height: 200px;
}
#trapezoid {
top: 50px;
left: 150px;
position: absolute;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
height: 16px;
border-right-width: 160px;
border-right-style: dashed;
border-right-color: white;
}
#trapezoid:before {
content: '';
position: absolute;
width: 40px;
height: 10px;
-webkit-box-shadow: 3px 0 130px 80px white;
left: 160px;
border-radius: 50px;
background-color: white;
}
#trapezoid-two{
top: 60px;
left: 200px;
position: absolute;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
height: 6px;
border-right-width: 160px;
border-right-style: solid;
border-right-color: white;
}
I have a testimonials box that I would like to add a triangle to.
.arrow {
float: left;
margin-left: 25px;
margin-top: 20px;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-left: 0px solid transparent;
border-right: 25px solid transparent;
}
The problem is the triangle ends up being solid, as opposed to white with a gray border. Below is a screenshot of how the CSS currently displays. Thanks in advance for the time and help.
You can create two triangles, one that overlaps the other, to create this bordered effect. You can do this with the ::before and ::after pseudo-elements so that you don't even have any superfluous HTML.
http://jsfiddle.net/7K2c4/
.mybox {
position: relative;
border: 1px solid #ccc;
}
.mybox:before,
.mybox:after { position: absolute;
left: 20px;
bottom: -19px;
display: block;
width: 0;
height: 0;
border-width: 0 25px 20px;
border-style: solid;
border-color: transparent;
border-left-color: #fff;
content: ' ';
}
.mybox:before { left: 19px;
bottom: -21px;
border-left-color: #ccc; }
You can place another triangle over it, smaller with the same color of the box background. You don't even need to create another HTML element, just use a pseudo-element selector.