I recently came across an article detailing how to create responsive triangles with pure CSS. I was wanting to take this a step further to incorporate it into a current design.
I was able to get four triangles placed within a square div perfectly (creating an origami-type effect) and they are responsive.
However when I try to incorporate a hover effect, it does not change the color of the triangle - only the empty space around it.
Also, when my square's width changes (keeping with the responsiveness) the bottom triangle separates from the others - because I used absolute positioning and bottom: 0; to place the triangles within the square.
Does anyone know a way around this to achieve my desired effect in pure CSS? Here is the relevant code : JSFiddle
HTML:
<body>
<div class="container">
<div class="box">
<div class="triSectionTop"></div>
<div class="triSectionRight"></div>
<div class="triSectionBottom"></div>
<div class="triSectionLeft"></div>
</div>
</div>
</body>
SCSS:
.container {
box-sizing: border-box;
height: 400px;
width: 400px;
}
.box {
position: relative;
box-sizing: border-box;
height: 400px;
width: 100%;
}
.triSectionTop {
position: absolute;
top: 0;
width: 100%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -200px;
margin-top: -200px;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 200px solid #41a5e8;
}
}
.triSectionRight {
position: absolute;
right: 0;
width: 50%;
height: 0;
padding-top: 50%;
padding-bottom: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top: -200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-right: 200px solid #4eb2f5;
}
}
.triSectionBottom {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
padding-left: 50%;
padding-bottom: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -200px;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #5abeff;
}
}
.triSectionLeft {
position: absolute;
left: 0;
width: 0;
height: 0;
padding-top: 50%;
padding-bottom: 50%;
padding-left: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top: -200px;
margin-left: -200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid #67cbff;
}
}
You can achieve the hover effect (background-color change and outside box-shadow) by making the triangles with transform-rotate.
This will allow you to triger the hover event only when the shape is actualy hovered :
DEMO
.box{
width:500px;
height:500px;
position:relative;
overflow:hidden;
}
.box > div{
position:absolute;
bottom:50%; left:50%;
width:75%; height:75%;
transform-origin:0 100%;
z-index:1;
}
.triSectionTop{
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
background:#41A5E8;
}
.triSectionRight{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
background:#4EB2F5;
}
.triSectionBottom{
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
transform:rotate(135deg);
background:#5ABEFF;
}
.triSectionLeft{
-webkit-transform:rotate(225deg);
-ms-transform:rotate(225deg);
transform:rotate(225deg);
background:#67CBFF;
}
.box > div:hover{
background:teal;
box-shadow: 0 0 10px 0 #656565;
z-index:2;
}
<div class="box">
<div class="triSectionTop"></div>
<div class="triSectionRight"></div>
<div class="triSectionBottom"></div>
<div class="triSectionLeft"></div>
</div>
This will work try this
Here is the Html
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
Here is the CSS
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
here is the source
Related
I am building a testimonial component in react and I have to make a shape direction towards pic, I have done the shape exactly how I want but the testimonial div has border color when I apply the div gets a border but the shape is left outside I have tried several ways but couldn't find a solution, I have attached the picture of what I want and how it is right now.
How I want it
What I have achieved till now
Below is my CSS
#page {
background-color: lightgray;
padding: 40px;
}
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
border: 1px solid #E7E7E7;
padding: 30px;
box-sizing: border-box;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div id="page">
<div class="container">This is a test</div>
</div>
You may use a filter , choice: drop-shadow.
support ? , don't be afraid : https://caniuse.com/?search=drop-shadow All but IE 6-11 and Opera mini
here is an exemple to run:
#page {
background-color: lightgray;
padding: 40px;
}
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
filter:
/* draw borders without blur*/
drop-shadow(0 1px )
drop-shadow(1px 0px )
drop-shadow(0 -1px )
drop-shadow(-1px 0px )
/* add eventually a shadow */
drop-shadow(0 0 3px )
/*and another for demo purpose */
drop-shadow(30px 30px 3px gray );
padding: 30px;
box-sizing: border-box;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div id="page">
<div class="container">This is a test</div>
</div>
You can use a :before that's 1px bigger than your :after which uses the border colour instead and then it will be mostly covered by the :after, giving you your "fake" border. Just makes sure your z-indexing is correct so it doesn't show inside your bubble.
EDIT: Adding in example css.
I modified some colours and spacing for illustrative purposes:
#page {
background: #ffc;
padding: 40px 40px 60px;
position: relative;
z-index: 0;
}
.container {
position: relative;
background: #fff;
max-width: 600px;
height: auto;
border: 1px solid #000;
padding: 30px;
box-sizing: border-box;
}
.container:after,
.container:before {
position: absolute;
width: 0;
height: 0;
top: 101%;
left: 40%;
content: "";
transform: rotate(14deg);
margin-top: -10px;
}
.container:after {
border-top: 50px solid #fff;
border-right: 40px solid transparent;
}
.container:before {
border-top: 52px solid #000;
border-right: 42px solid transparent;
margin-left: -1px;
z-index: -1;
}
<div id="page">
<div class="container">This is a test</div>
</div>
Adding both a :before and :after is a good idea to get the effect you want. Using a CSS box-shadow or outline won't work because it actually renders a complete square around your arrow/triangle shape. A z-index is added to the before to push it to the background. In that way it's not overlapping the other objects.
Here's an example of what you might want. You can adjust the border sizes to finetune it.
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
border: 1px solid #E7E7E7;
padding: 30px;
box-sizing: border-box;
}
.container:before {
position: absolute;
width: 0;
height: 0;
border-top: 53px solid #e7e7e7;
border-right: 43px solid transparent;
top: 100%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
z-index: -1;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div class="container"></div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 3 years ago.
Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:
I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).
Any ideas how else I might do this?
EDIT:
Here's the HTML:
<div class="blue white1 white">text</div>
.blue {
border: blue 4px solid;
etc..
}
Using one div, and one node for targeting. http://jsfiddle.net/eCEds/2/
HTML:
<div class="blue white1 white"><p>Text</p></div>
CSS:
.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:blue;
border-style:solid;
content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
.text
{
border: 1px solid #00f;
height: 200px;
position: relative;
width: 200px;
}
.text:after
{
position:absolute;
top: 10%;
height: 80%;
content: "";
width: 99%;
left: -3px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.text:before
{
position:absolute;
left: 10%;
height: 99%;
content: " ";
width: 80%;
top: -3px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
<div class="text">test test gfgfgf gfg f</div>
This is my variant.
Something like this is achievable with CSS gradients and multiple backgrounds: http://jsbin.com/usegup/1/edit. But probably SVG background will be more suitable for such cases.
Do you mean something like this: http://jsfiddle.net/FlameTrap/F5bC6/
HTML
<div class="text">
<span class="corner TL"></span>
<span class="corner TR"></span>
<span class="corner BL"></span>
<span class="corner BR"></span>
<div class="text">Text</div>
</div>
CSS
.text {
background: #fff;
width: 300px;
height: 200px;
position: relative;
z-index: 3;
}
.corner {
position: absolute;
background: blue;
width: 20px;
height: 20px;
z-index: 2;
}
.TL {
top: -10px;
left: -10px
}
.TR {
top: -10px;
right: -10px
}
.BL {
bottom: -10px;
left: -10px
}
.BR {
bottom: -10px;
right: -10px
}
Something like this would work and give you less issues in older browsers to boot:
<style>
.blue {
width: 500px;
height: 500px;
position: relative;
}
.corner {
position: absolute;
border-color: blue;
width: 30px;
height: 30px;
}
.tl {
top: 0;
left: 0;
border-top: 2px solid;
border-left: 2px solid;
}
.tr {
top: 0;
right: 0;
border-top: 2px solid;
border-right: 2px solid;
}
.br {
bottom: 0;
right: 0;
border-bottom: 2px solid;
border-right: 2px solid;
}
.bl {
bottom: 0;
left: 0;
border-bottom: 2px solid;
border-left: 2px solid;
}
</style>
<div class="blue">
<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>
</div>
I have a div with an arrow before it.
the problem is, when I add:
overflow-y: auto;
the arrow disappears.
https://jsfiddle.net/z95frkuv/
#n {
position: fixed;
min-width: 140px;
min-height:100px;
max-height:400px;
//overflow-y: auto; // need to remove this to see arrow
border:1px solid #000;
z-index:3000;
}
#n:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
why?
overflow:auto works like overflow:hidden when it comes to absolute positioned elements.
In order to overcome it, add a wrapper div:
<div class="wrapper">
<div id=n>content<br>content<br>content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br></div>
</div>
And update the css:
.wrapper {
position: fixed;
z-index:3000;
}
.wrapper:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#n{
min-width: 140px;
min-height:100px;
max-height:400px;
overflow-y: auto;
border:1px solid #000;
}
fiddle: https://jsfiddle.net/yow7wm7r/1/
That's exactly what overflow is doing, if an element is defined inside the box, but with css it sticks outside, the overflow will clip it out.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I am trying to create a ribbon at the beginning of a rectangle. However, I cannot figure out how to make it appear BEHIND the rectangle.
Please see this codepen: http://codepen.io/gosusheep/pen/aOqOBy
The part for creating the ribbon and putting it behind the rectangle is here:
.rectangle::before{
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10%;
}
Even with position: absolute, and z-index: -1, it appears ON TOP of the div.
Can anyone help with this?
What is happening here is that apparently, the property transform: translateX(-50%); it's "overriding" in some way the z-index. My solution is just center rectangle otherwise, for example:
.rectangle{
margin: 0 auto;
}
DEMO
The reason for your problem is not because children cannot be positioned behind their parent but because you are using a transform on the parent. Using transforms affect the stacking context like mentioned in this answer by BoltClock.
One solution would be to avoid the transform totally and use left: calc(50% - 100px) instead to position the ribbon at the center (like in the below snippet). (50% - 100px) is used as the value because 100px is half of the box width (50% is the center point of the parent).
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'></div>
</div>
If in case you can't use the above solution, then you could follow the approach described below.
Assuming you don't have any other use for the ::after pseudo-element, you could use that to create the rectangle and give it a z-index higher than the ::before pseudo-element to make it appear behind the rectangle.
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
Below is a sample snippet:
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -2;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'>
Some content
</div>
</div>
Solution here, look closely at z-indexes and positions
.container{
position: relative;
width: 100%;
z-index: 1;
}
.rectangle{
width: 200px;
height: 50px;
background-color: $blue;
position: absolute;
left: 50%;
border: 1px darken($blue,5%) solid;
}
.rectangle::after{
content: "";
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10px;
position: absolute;
z-index: -1;
}
And your codepen edited http://codepen.io/anon/pen/mJXeed working now
I've got a AND logic gate being created with a set of divs. I would like them to scale with the size of the outer most .gate div. I would like it to be 100% the width and height of the .gate div.
I've got things almost working, the AND gate is 2 pixels taller and with width is a bit wonky. The width I think has to do with the padding on the .outer div but I'm not sure of a better way to do it.
jsfiddle
HTML
<div class="gate">
<div class="outer">
<div class="inner">
<div class="andInA"></div>
<div class="andInB"></div>
<div class="andOutA"></div>
<div class="andLeft"></div>
<div class="andRight"></div>
</div>
</div>
</div>
CSS
.gate {
position: relative;
width: 150px;
height: 100px;
background-color: #ccc;
}
.outer {
position: relative;
padding: 0 30% 0 0;
height: 100%;
}
.inner {
position: relative;
margin: 0 20% 0 20%;
width: 100%;
height: 100%;
}
.gate .andLeft {
position: absolute;
left: 0px;
height: 100%;
width: 45%;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 0px solid black;
}
.gate .andRight {
position: absolute;
right: 0px;
height: 100%;
width: 75%;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 0px solid black;
border-right: 1px solid black;
border-radius: 0% 100% 100% 0%;
}
.andInA {
position: absolute;
top: 25%;
margin-left: -20%;
width: 20%;
height: 1px;
border-top: 1px solid black;
}
.andInB {
position: absolute;
top: 75%;
margin-left: -20%;
width: 20%;
height: 1px;
border-bottom: 1px solid black;
}
.andOutA {
position: absolute;
top: 50%;
right: 0px;
margin-right: -20%;
width: 20%;
height: 1px;
border-top: 1px solid black;
}
Use the box-sizing property:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
http://jsfiddle.net/eNT2d/3/
Decrease your inner height and increase your inner widh by 2%.
.inner {
position: relative;
margin: 0 20% 0 20%;
width: 102%;
height: 98%;
}