I need to create 1 div element and in it I need to draw 2 triangles as 1
1) it must be up arrow
2) it must be down arror
but I need add them in 1 class
I understand that I can create 2 classes and then with margin connect them but I need only one class
this is a problem.
can I do this?
If you were looking to make This for design (rather than being functional), you could use pseudo elements:
div {
position: relative;
margin: 50px;
height: 100px;
width: 100px;
transform: rotate(45deg);
}
div:before {
content: "";
height: 40%;
width: 40%;
top: 0;
left: 0;
position: absolute;
border-top: 5px solid black;
border-left: 5px solid black;
transition: all 0.6s;
}
div:after {
content: "";
height: 40%;
width: 40%;
bottom: 0;
right: 0;
position: absolute;
border-bottom: 5px solid black;
border-right: 5px solid black;
transition: all 0.6s;
}
div:hover:before,
div:hover:after {
border-color: tomato;
}
<div></div>
If, however, you need this to be actually functional (i.e. to register if you need it to be 'pressable' - then you would need to use multiple elements since pseudo elements aren't distinguishable in the DOM for 'key pressing'):
div {
margin: 50px;
height: 100px;
width: 100px;
position: relative;
}
div .up {
position: absolute;
top: 0;
left: 50%;
height: 50%;
width: 50%;
transform-origin: top left;
transform: rotate(45deg);
border-left: 5px solid tomato;
border-top: 5px solid tomato;
transition: all 0.6s;
}
div .down {
position: absolute;
top: 45%;
left: -5%;
height: 50%;
width: 50%;
transform-origin: bottom right;
transform: rotate(45deg);
border-bottom: 5px solid tomato;
border-right: 5px solid tomato;
transition: all 0.6s;
}
div span:hover {
border-color: black;
}
<div>
<span class="up"></span>
<span class="down"></span>
</div>
You can create a square div and just rotate it 45 degrees using CSS transform. You can view a live demo of it at JSFiddle
<div class="diamond"></div>
<style>
.diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
</style>
Related
I tried to add an arrow shape to a div. i managed to add it to the end of the div but i am struggling to figure out how to add it to the front as well without using a new class. Is it possible to achieve it with only one class?
edit: my answer to the question with a different shape approach,
i think they are all 3 very useful:
.arrow {
margin-left: 100px;
position: relative;
background: pink;
width: 400px;
height: 100px;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.arrow:after {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: white;
border-width: 50px;
left: 0;
top: 0;
transform: rotate(90deg);
}
.arrow:before {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: pink;
border-width: 50px;
left: 400px;
top: 0;
transform: rotate(90deg);
}
<div class="arrow">
1
</div>
<div class="arrow">
2
</div>
You will need an inner element. What that element is, is purely up to you. Here I've used a <span> to make the left arrow appear.
.arrow {
float: left;
width: 128px;
height: 50px;
background-color: white;
border: 1px solid green;
position: relative;
margin-right: 40px;
text-align: center;
border-left: none;
}
.arrow:after,.arrow span:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid white;
z-index: 2;
}
.arrow:before,.arrow span:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid green;
z-index: 1;
}
.arrow span:after {
left: 0;
}
.arrow span:before {
left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>
I have modified chevron shape, from this page: https://css-tricks.com/examples/ShapesOfCSS/ (borrowed idea, credits to mr Anthony Ticknor:))
.chevron {
position: relative;
text-align: center;
height: 60px;
width: 260px;
line-height:60px;
margin-bottom:10px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 3%;
height: 50%;
width: 100%;
transform: skew(25deg, 0deg);
border:1px solid red;
border-bottom:none;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
left: 3%;
height: 50%;
width: 100%;
transform: skew(-25deg, 0deg);
border:1px solid red;
border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>
So, one div, and two pseudo-elements, properly scewed, with borders hidden, where needed.
Need help on how to put an arrow on each side of a box pointing outward.
I have the box and the basic CSS for an arrow I saw on another stack question.
Need help creating four arrows in that box
Im a java developer so this is not my cup of tea
Box:
#myBox {
width: 150px;
height: 150px;
background-color: grey;
border: 1px solid black;
}
/*Chevron*/
.Chevron {
position: relative;
display: block;
height: 50px;
/*height should be double border*/
}
.Chevron:before,
.Chevron:after {
position: absolute;
display: block;
content: "";
border: 25px solid transparent;
/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before {
top: 0;
border-top-color: #b00;
/*Chevron Color*/
}
.Chevron:after {
top: -50px;
/*adjust thickness*/
border-top-color: #fff;
/*Match background colour*/
}
<div id="myBox"></div>
<i class="Chevron"></i>
Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.
.box {
height: 150px;
width: 150px;
background: lightgray;
position: relative;
}
.wrap {
position: absolute;
top: 0;
left: 25%;
height: 25%;
width: 50%;
overflow: hidden;
}
.touch {
position: absolute;
top: 0;
left: 50%;
height: 200%;
width: 200%;
transform: rotate(45deg);
transform-origin: top left;
background: gray;
cursor: pointer;
}
.wrap:nth-child(2) {
transform: rotate(90deg);
transform-origin: top left;
top: 25%;
left: 100%;
}
.wrap:nth-child(3) {
transform: rotate(180deg);
transform-origin: top left;
top: 100%;
left: 75%;
}
.wrap:nth-child(4) {
transform: rotate(-90deg);
transform-origin: top left;
top: 75%;
left: 0;
}
.touch:hover {
background: tomato;
}
<div class="box">
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
</div>
i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.
Use Css triangle. Do you need something like this?
For each side, use the code below to make a triangle:
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
Here is a working demo.
I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?
.container {
width: 100px;
height: 100px;
background: grey;
position: relative;
}
.container .triangles {
width: 70px;
height: 70px;
background: yellow;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 15px;
}
.container .triangles .box {
width: 50px;
height: 50px;
background: blue;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: 10px;
color: white;
}
<div class="container">
<div class="triangles">
<div class="box">
text
</div>
</div>
</div>
I want to design a button that looks like the one below:
I know it is a localized issue, but I can't seem to make it look like that without images
I have used both a :before and :after pseudo element in order to achieve and effect like this.
You could then use a combination of CSS transform properties. Something like a rotation with perspective should create the trapezium, and then use borders on another pseudo element to generate the lines.
A quick mockup demo would be:
.demowrapper {
margin: 0 auto;
height: 500px;
background: lightgray;
width: 300px;
box-shadow: 0 0 20px 5px dimgray;
position: relative;
}
button {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 30px;
background: tomato;
display: inline-block;
border: 0;
cursor: pointer;
}
button:before {
content: "";
position: absolute;
height: 20px;
width: 50px;
background: inherit;
top: -18px;
left: 50%;
border-radius: 5px 5px 0 0;
transform: translateX(-50%) perspective(50px) rotateX(45deg);
}
button:after {
content: "";
position: absolute;
height: 2px;
width: 40px;
border-top: 2px solid black;
border-bottom: 2px solid black;
top: -8px;
left: 50%;
transform: translate(-50%);
}
button:hover{
background:yellow;
<div class="demowrapper">
<button>SELECT your Button</button>
</div>
Hi ,
I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ?
EDIT: What ive tried was this
trapezoid {
border-bottom: 100px solid red;
border-left: 150px solid transparent;
border-right: 0px solid transparent;
height: 0;
}
It produces trapezoid which is nice but its differnetly rotated and i cant figure out how to rotate it
You could use a skew'ed pseudo element for this. Something like:
div {
height: 100px;
background: tomato;
padding-top: 10px;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
background: gray;
-webkit-transform-origin: top left;
-webkit-transform: skewY(2deg);
-moz-transform-origin: top left;
-moz-transform: skewY(2deg);
transform-origin: top left;
transform: skewY(2deg);
}
<div></div>
Another Approach would be:
div{
height:100px;
width:90vw;
margin:0;padding:0;
padding-top:10px;
background:gray;position:relative;
}
div:before{
content:"";
position:absolute;
top:0;
left:0;
border-left:90vw solid transparent;
border-top:10px solid red;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
<div></div>
You have to take a dummy div to make it behave as want that to rotate and make the tail visible
#black {
background-color: black;
position: absolute;
-ms-transform: rotate(1deg);
/* IE 9 */
-webkit-transform: rotate(1deg);
/* Safari */
transform: rotate(1deg);
top: -95px;
}
#grey {
background-color: grey;
position: absolute;
top: 0px;
}
div {
width: 100%;
height: 100px
}
<div id="grey"></div>
<div id="black"></div>
This is what your expected output:
.main {
background: none repeat scroll 0 0 grey;
height: 80px;
overflow: hidden;
position: relative;
width: 380px;
}
.inner {
background: none repeat scroll 0 0 red;
height: 80px;
left: 400px;
margin: 0 auto;
top: 80px;
width: 150px;
z-index: 99999;
}
.inner::before {
border-bottom: 0 solid transparent;
border-right: 100px solid red;
border-top: 83px solid transparent;
bottom: 0;
content: "";
height: 66px;
left: 15px;
position: absolute;
right: 100%;
top: 0;
width: 0;
}
<div class="main">
<div class="inner"></div></div>
Hope it helps.
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>