I have this shape with pseudo elements:
https://jsfiddle.net/6gf1m3j5/
body {
margin: 0;
background:#ccc;
}
#octagon-left {
background: red none repeat scroll 0 0;
height: 60px;
width: 100%;
}
#octagon-left::before {
border-left: 100px solid white;
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
top: 0;
width: 40px;
}
#octagon-left::after {
border-right: 100px solid white;
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
width: 40px;
}
The problem here is the white color in the left and right corner.
If I do, border-left: 100px solid transparent; the color red is prevailing.
I want to like this:
How can I do that?
I really appreciate your support, thanks.
#octagon
{
background-color: red;
height: 60px;
margin: 0 auto;
position: relative;
width: calc(100% - 120px);
}
#octagon:before,
#octagon:after
{
background-color: red;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#octagon:before
{
transform: translateX(30px) skewX(-45deg);
}
#octagon:after
{
transform: translateX(-30px) skewX(45deg);
}
<div id="octagon"></div>
Change you code like so and let me know
body {
margin: 0;
background:#ccc;
}
#octagon-left {
background: red none repeat scroll 0 0;
height: 60px;
width: 100%;
}
#octagon-left::before {
border-left: 100px solid #ccc;/*Change from white to #ccc*/
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
top: 0;
width: 40px;
}
#octagon-left::after {
border-right: 100px solid #ccc;/*Change from white to #ccc*/
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
width: 40px;
}
<div id="octagon-left">
</div>
Related
I want to create a black graphical element with a border that is positioned above the video feed pictured.
I have tried using :before and :after but the border complicates things. Any help would be greatly appreciated.
You can see in the photo that the feed is going below the border, since the graphic element is currently a square with a border radius
The below code is how I created the shape as pictured, but it is faulty since the feed goes above the border:
div.wrap1{
position: fixed;
height: 90vh;
bottom: 0;
left: 0;
width: 80vw;
margin-left: -120px;
.graphic-bg-1{
z-index: 5;
border: 3px solid #3AD8FF;
border-bottom: none;
border-radius: 120px;
position: relative;
width: 100%;
height: 100%;
}
.mask{
position: absolute;
height: 500px;
width: 100%;
background-color: black;
bottom: 0;
// margin-left: -120px;
z-index: 6;
}
}
div.wrap2{
position: fixed;
height: 75vh;
width: 100vw;
right: 0;
bottom: 10vh;
margin-right: calc(-80vw + 123px);
z-index: 7;
.graphic-bg-2{
z-index: 8;
border: 3px solid #3AD8FF;
border-top: transparent;
border-radius: 120px;
position: relative;
width: 100%;
height: 100%;
}
.mask2{
position: absolute;
height: 109px;
width: calc(100% - 3px);
background-color: black;
top: 0;
right: 0;
z-index: 8;
}
}
.first-element {
width: 150px;
height: 100px;
margin-top: 20px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-top-right-radius: 30px;
float: left;
}
.secound-element {
float: left;
width: 150px;
height: 100px;
margin-top: 70px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-bottom-left-radius: 30px;
margin-left: -1px;
}
<div class="first-element"></div>
<div class="secound-element"></div>
Try this it might helpful
I am trying to make slanted box shadow on both sides of a div, which I have added here as an image.
The red part is indicating here shadow. actually color is not solid, it should gradually decrease when it is moving to outside from border.
Here is my contribution hope it gives you a baseline.
.box {
width: 150px;
height: 200px;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background-color: white;
border: 2px solid black;
width: 100%;
height: 100%;
position: relative;
}
.box::before {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-right: 25px solid red;
position: absolute;
left: 0;
bottom: 0;
}
.box::after {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-left: 25px solid red;
position: absolute;
right: -4px;
bottom: 0;
}
<div class="box">
<div class="box-content">
Box
</div>
</div>
Try this:
div{
width: 200px;
height: 200px;
border:1px solid black;
background: white;
}
div:before{
content:' ';
display:block;
width: 200px;
height:200px;
background: linear-gradient(transparent, black);
position: fixed;
transform: matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1); z-index: -1;
}
<div>Hello</div>
Using transform: skew() applied to the div's before and after
jsFiddle 1
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background-color: red;
transform: skew(5deg, 0);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
EDIT : to give the shadow effect some real blur with gradient and transparency, we could make use of linear-gradient background with two rgba() values, as well as CSS blur() (1) filter.
jsFiddle 2
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
transform: skew(5deg, 0);
filter: blur(2px);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
Notes:
(1) browser support for CSS filter
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 was trying to customize ionic lists and tabs but since I am not too experienced in css does anyone know how to get these layouts ? :
List picture:
TABS picture:
You could use a border trick with some pseudo elements for this:
.onecorner,
.twocorners {
height: 50px;
width: 300px;
line-height: 50px;
text-align: center;
background: lightgray;
margin-left: 25px;
margin-right: 25px;
position: relative;
}
.onecorner:after{
content: "";
position: absolute;
top: 0;
left: 100%;
height:100%;
width:25px;
background:inherit;
}
.onecorner:before,
.twocorners:before {
content: "";
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
width: 0;
height: 25px;
border-top: 25px solid transparent;
border-right: 25px solid lightgray;
}
.twocorners:after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translateX(100%);
width: 0;
height: 25px;
border-bottom: 25px solid transparent;
border-left: 25px solid lightgray;
}
<div class="onecorner">tab 1</div>
<br/>
<div class="twocorners">tab 2</div>
Check this link. I want to position the blue and black div exactly at the right and bottom of the red div respectively. I want the right vertex of the blue div to align with the right vertex of the red one and the bottom vertex of the black div to align with the bottom vertex of the red one. What is the best way to do that?
Thank You in advance.
The HTML
<div id="diamond">
<div id="diamond_right"></div>
<div id="diamond_bottom"></div>
</div>
The CSS
#diamond {
width: 0;
height: 0;
border: 300px solid transparent;
border-bottom-color: red;
position: relative;
top: -300px;
z-index:0;
}
#diamond:after {
content: '';
position: absolute;
left: -300px;
top: 300px;
width: 0;
height: 0;
border: 300px solid transparent;
border-top-color: red;
}
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: relative;
top: -50px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}
#diamond_bottom {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: black;
position: relative;
top: -50px;
z-index:2;
}
#diamond_bottom:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;
}
Much easier to do this with a single normal div and a couple of pseudo elements using standard techniques and then rotate the whole lot together.
#diamond {
width: 300px;
height: 300px;
background: red;
position: relative;
margin: 75px;
transform: rotate(-45deg);
}
#diamond::before,
#diamond::after {
content: '';
width: 50px;
height: 50px;
bottom: 0;
position: absolute;
}
#diamond::before {
background: blue;
right: 0;
}
#diamond::after {
background: black;
left: 0;
}
<div id="diamond"></div>
I did this with the blue one in your fiddle and it aligned with the right vertex, if you plug this in is this what you were looking to achieve?
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: absolute;
top: 200px;
right: -300px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}