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/
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'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.
I am trying to make a progress indicator for a Gantt chart, showing actual progress against target progress, a bit like this:
The black bar is the target, and the red is actual progress.
Sample code (it's generated on the fly) is this:
<div style='border: 1px solid red; position:relative; text-align:right'>
<div class='progressBarRed' style='width:40%; float:left'></div>
<div class='progressBarEmpty' style='width:60%; float:left;'></div>
<div class='progressBarTarget' style='width:75%;'></div>
</div>
and the CSS is:
/* Gant Bar
-----------------------------------------------*/
div.progressBarEmpty
{
height:18px;
position:relative;
background: #dddddd;
}
div.progressBarGreen
{
position:relative;
top:0px;left:0px;
height:18px;
background: #009900;
z-index:0;
}
div.progressBarRed
{
position:relative;
top:0px;left:0px;
height:18px;
background: #ee0000;
z-index:0;
}
div.progressBarTarget
{
position:absolute;
top:7px;left:0px;
height:4px;
background-color:#000000;
border-style: none;
z-index:1;
}
The problem I'm having is that I can't get the red border to sit around the bars, like this:
It works with an empty bar, but when I introduce the red bar (and the float) the border collapses.
JSFiddle is here: https://jsfiddle.net/bdgriffiths/funnx3uz/
You can make the same with just one element. Add z-index: -1; to the pseudo-element to take it to the bottom of everything.
Hover over the bar to see the red progress bar.
Fiddle
div {
height: 25px;
border: 1px solid red;
width: 100%;
position: relative;
}
div:before {
content: '';
position: absolute;
height: 5px;
width: 75%;
top: 10px;
background-color: black;
}
div:after {
content: '';
position: absolute;
height: 100%;
width: 0%;
background-color: red;
z-index: -1;
}
div:hover:after {
width: 75%;
transition: 1s ease;
}
<div></div>
Add overflow: auto; style to your div:
<div style='border: 1px solid red; overflow: auto; position:relative; text-align:right'>
<div class='progressBarRed' style='width:40%; float:left'></div>
<div class='progressBarEmpty' style='width:60%; float:left;'></div>
<div class='progressBarTarget' style='width:75%;'></div>
</div>
Basically if You are using "float div" inside another div it causes that inner div's height (with float style) is not added to outter div's height so in Your example the outter div has 0 height. overflow causes that it's inner div's height is added to outter div's height.
I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.
The border style is a simple 1px solid #000;
However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width),
rather only on the first 50% of the div's width.
I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).
If you do not want to mess with the HTML at all, you can do it with an empty pseudoelement, using CSS only. You still need to know the background color, of course (assuming white here):
<span class="half-a-border-on-top">Hello world!</span>
<style>
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
background-color:white;
position: absolute;
right:0;
top:-1px;
}
</style>
Result:
Snippet
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;
background-color:white;
position: absolute;
right:0;
top:-1px;
}
<span class="half-a-border-on-top">Hello world!</span>
Fiddle:
http://jsfiddle.net/vL1qojj8/
Edit 2023: Now that even Safari seems to fully and properly support linear-gradient, the answer by 红了樱桃绿了吧唧 is probably more elegant, and will work without knowing the background color.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top:-1px;
left:1px;
width:50%;
height: 1px;
background-color:#fff;
}
<div id="holder">
<div id="mask"></div>
</div>
You can use CSS gradient border
.half-a-border-on-top {
border-top: 1px solid;
border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}
<span class="half-a-border-on-top">Hello world!</span>
let show you how i edit the code of leo, to put a half border at left in center.
try this:
html code
<div class="half-a-border-on-left">Hello world!</div>
css code
<style>
.half-a-border-on-left {
border-left: 1px solid black;
position: relative;
height: 50px;
background: red;
}
.half-a-border-on-left:after {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left:-1px;
top: -10px;
}
.half-a-border-on-left:before {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left: -1px;
bottom: -5px;
}
</style>
Those are code i use to put a half border thank you leo,
I love Hyderabad
***
.div_1 {
width: 50px;
border-bottom: 2px solid black;
}
.div_2 {
width: max-content;
margin-bottom: 10px;
}
<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>