I've got this shape made:
https://jsfiddle.net/5vue1buj/1/
However, the way I'm doing this is by inserting:
<br /><br /><br /><br />
in between the top and bottom. How do I do this more elegantly?
Remove all inline styling.
DEMO
HTML
<div>
<div id="top">
<div class="triangle-down-right">
<!--empty-->
</div>
<div class="triangle-down-left">
<!--empty-->
</div>
</div>
<div id="bottom">
<div class="triangle-up-right">
<!--empty-->
</div>
<div class="triangle-up-left">
<!--empty-->
</div>
</div>
</div>
Then add this CSS:
#top, #bottom {
float: none;
overflow: hidden;
}
#top {
margin-bottom: 10px;
}
By using css styles margin/padding you can achieve this.
In your case you have to clear the space between the two containers [top and bottom]. By default div elements are left aligned. I have added an empty divwhich will remove the space in between the two container [using clear:both. height and overflow is added for Cross browser compatibility]
please check this Fiddle.
By using minimal of html and css
You can use only two div and two its psuedo elements :after and :before
.bottom {
position:absolute;
width:210px;
top:180px;
}
.upper {
position:absolute;
width:210px;
top:20px;
}
.upper:before {
content:'';
position:absolute;
left:0;
width: 0;
height: 0;
border-bottom: 100px solid #4679BD;
border-left: 100px solid transparent;
}
.upper:after {
content:'';
position:absolute;
right:0;
width: 0;
height: 0;
border-bottom: 100px solid #4679BD;
border-right: 100px solid transparent;
}
.bottom:before {
content:'';
position:absolute;
left:0;
width: 0;
height: 0;
border-top: 100px solid #4679BD;
border-left: 100px solid transparent;
}
.bottom:after {
content:'';
position:absolute;
right:0;
width: 0;
height: 0;
border-top: 100px solid #4679BD;
border-right: 100px solid transparent;
}
<div class="upper"></div>
<div class="bottom"></div>
Here's another way, with much less CSS...
#top, #bottom {
height: 200px;
position: relative;
}
.right, .left {
height: 0;
width: 0;
display: inline-block;
}
#top {
margin-bottom: 10px;
}
.left {
margin-right: 10px;
}
#top .left {
border-top: 200px solid transparent;
border-right: 200px solid #4679bd;
}
#top .right {
border-top: 200px solid transparent;
border-left: 200px solid #4679bd;
}
#bottom .left {
border-bottom : 200px solid transparent;
border-right: 200px solid #4679bd;
}
#bottom .right {
border-bottom: 200px solid transparent;
border-left: 200px solid #4679bd;
}
<div>
<div id="top">
<div class="left"></div><div class="right"></div>
</div>
<div id="bottom">
<div class="left"></div><div class="right"></div>
</div>
</div>
Just for fun, here another example.
It uses pseudo elements and some new css3 properties to minimize the html markup down to only one div. This div is relatively positioned, but could as well be positioned absolutely for easily placing it wherever you like on the page.
A sophisticated jsfiddle can be found here where you can play around if the values easily (using Sass).
#shape{
position:relative;
background:#4679BD;
width:200px;height:200px;
transform:rotate(45deg);
margin-top:50px;margin-left:50px;
overflow:hidden;
}
#shape::before,#shape::after{
content:"";display:block;
position:absolute;
width:300px;height:10px;
background:white;
transform:rotate(45deg);
transform-origin:5px 5px;
left:-5px;top:-5px;
}
#shape::after{
transform:rotate(-45deg);
bottom:-5px;top:auto;right:-5px;
}
<div id="shape"></div>
Size is easily adjustable by adjusting the width of the pseudo elements like: (dim of shape + 5) * 1,414 and the height determines the gap between the triangles.
Related
I have a parent div that contains a child that is aligned to the bottom right corner of the parent. The child has text within it that I am trying to get to display correctly.
As it is currently set up, the contents of the child has placed the text to the right side instead of within.
CSS:
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
HTML:
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Fiddle:
http://jsfiddle.net/vh7m8gey/1/
Output:
I am trying to get the $25 to be centered in the black triangle that is on the bottom right of the child.
How should i approach this?
I created a container for the amount with absolute position right 3px and bottom -45px.
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
.amountContainer{
position:absolute;
padding:1%;
bottom:-45px;
right:3px;
}
<div class="container">
<div class="gradeTriangle">
<div class="amountContainer">$25</div>
</div>
</div>
Look at this. You need to insert for example span inside gradeTriangle, and position It using css.
.gradeTriangle span {
position: absolute;
bottom: -40px;
right: 0px;
}
HTML:
<div class="container">
<div class="gradeTriangle">
<span>$25</span>
</div>
</div>
You can easily create the triangle as background of the main container:
.container {
background:
linear-gradient(to bottom right,transparent 49.8%,#000 50%) bottom right/50px 50px no-repeat,
red;
height: 200px;
width: 400px;
position: relative;
}
.gradeTriangle {
bottom: 5px;
right: 5px;
position: absolute;
color: green
}
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Need to add some style to get the design, added the following style for gradeTriangle
.gradeTriangle{
position:absolute;
right:0;
bottom:0;
width: 60px;
height: 60px;
border-bottom: solid 30px black;
border-right: solid 30px black;
box-sizing: border-box;
color:#fff;
border-left: solid 30px transparent;
border-top: solid 30px transparent;
}
please check the sample code.
I am trying to add a bottom arrow image at the the top of every div section of my web page.I want the bottom arrow to be centered as in http://jirungu2012.wix.com/firebrandoption2
Each section has a different bottom arrow color
You could use an image or you could use CSS. Here is a quick example with the green span line to show that it is centred. In future please show your attempts in your question and add more detail.
div{
width:500px;
height:200px;
background-color:blue;
position:absolute;
top:0;
left:0;
}
div::before{
content:" ";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position:absolute;
left:50%;
transform:translateX(-50%)
}
span{
position:absolute;
left:50%;
width:1px;
height:100%;
background-color:green;
}
<div>
<span></span>
</div>
.solidArea{
width:100%;
height:20px;
background-color:lightblue;
margin: ;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
<div class="solidArea">
<div align="center">
<div class="arrow-down "></div>
</div>
</div>
There you go..
I'm stuck here with an easy css problem:
The problem is to align "World" text inside the div element at the bottom right.
Here is a fiddle:
http://fiddle.jshell.net/0p6w3x14/2/
<div id="container">
<div id="tableElement">
<table> <!-- this table needs to be here, it's containing more info -->
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
<div id="element">
World
</div>
</div>
#container
{
width: 200px;
border: 1px solid black;
}
#tableElement
{
border: 1px solid black;
display: inline-block;
}
table
{
border: 1px solid red;
height: 100px;
}
#element
{
display: inline-block;
float: right;
border: 1px solid green;
}
Update your css like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // add this line
}
#element
{
display: inline-block;
position:absolute; //add this line
bottom:0; //add this line
right:0; //add this line
border: 1px solid green;
}
and remove float:right
Working fiddle here
Check this Fiddle.
I didn't use
float: right
and
display: inline-block
But instead I set a defined width, set its Left property to 100% and then use margin to adapt it to the container
#element{
width: 45px;
top:100%;
left: 100%;
margin-left: -45px;
}
This could be simply done by giving #element the styles position:absolute;, bottom:0; and right:0. And then giving #container the style position:relative; like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // Parent needs relative positioning if child will have absolute positioning
}
#element
{
border: 1px solid green;
position:absolute;
bottom:0;
right:0;
}
JSFiddle Demo
I would like to create a div or a section that has the edge in the bottom of your content inside normal and oblique. the result should be like this:
http://themeforest.net/item/delicious-responsive-app-landing-html-theme/full_screen_preview/7965552
can someone help me?
The example you have given uses images with a transparent background.
It is possible in CSS.
JSFiddle
HTML:
<div></div>
CSS:
div {
height:200px;
width:1000px;
background:indianred;
margin-top:250px;
position:relative;
}
div::before {
content:'';
position:absolute;
width: 0;
height: 0;
border-bottom: 100px solid indianred;
border-left: 1000px solid transparent;
top:-100px;
}
div::after {
content:'';
position:absolute;
width: 0;
height: 0;
border-top: 100px solid indianred;
border-right: 1000px solid transparent;
bottom:-100px;
}
If you want browser compatibility, you'll have to stick with the image method.
You could use a background trick:
<div class="div1">
content 1
</div>
<div> content 2</div>
.div1 {
background: linear-gradient(352deg, transparent 125px, #c00 0) bottom right;}
check this fiddle: http://jsfiddle.net/2f7Ds/
I'm trying to make two squares overlap eachother in a parent div. The squares are using position:inherit. Please note that the number of squares will be dynamic. Also note that the parent div is using margin-left: 30%. Is this possible?
<div style="border: 1px solid Black; width: 300px; height:300px; margin-left:30%;">
<div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
<div style="height:40px; width:40px; border: 1px solid Black; position:inherit; left:0px; top: 0px;"></div>
</div>
http://jsfiddle.net/AzYUn/1/
Get rid of the position: inherit; and use position: relative;.
Using the top, right, bottom and left properties you can move an element and making it overlap.
CSS
div.parent {
border: 1px solid black;
margin-left: 30%;
height: 300px;
width: 300px;
}
div.parent > div.box {
height:40px;
width:40px;
border: 1px solid black;
}
div.parent > div.box.overlap {
position: relative;
top: -40px;
}
HTML
<div class="parent">
<div class="box"></div>
<div class="box overlap"></div>
</div>
The only way I can think of is to use other position value - relative or even absolute to reach that goal.