I am new to css can you guys please help me out for making custom up arrow:
Below is my html div with only one div I want to make arrow using before and after css properties:
<div class="triangle-with-shadow"></div>
we have tried with below CSS code:
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
z-index: 5;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
border: 1px solid;
transform: rotate(45deg);
top: 75px;
left: 25px;
border-width: 1px 0 0 1px;
}
.triangle-with-shadow:before {
width: 100px;
background: white;
height: 100px;
position: absolute;
content: "";
top: 100px;
border: 1px solid;
}
Related
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
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;
}