Basically I am trying to cut the background of a div off at an angle. Please see the image below for an example: You will notice that the navigation section is cut off and also the header image below.
http://imgur.com/fsT4R9T
Is there a way to create this effect using CSS3? I have tried this:
.site-header {
background-color: #0c3063;
width: 960px;
height: 300px;
#include clearfix;
position: relative;
z-index: 1;
&:after {
content: "";
width: 100px;
position: absolute;
top: -162px;
right: -150px;
width: 300px;
height: 300px;
background-color: black;
transform: rotate(45deg);
z-index: 2;
}
}
In the example above it overlaps but I know how to fix this, basically just use before instead of after. However is there a better way of doing this?
My example seems I can not put the :after content before its parent so this solution is not ideal :( any ideas?
EDIT: https://jsfiddle.net/6x3yenge/1/
Thanks
Though the following code does not achieve what you want for the image, it surely does the job for the top menu. Using borders to create triangles simplies things a lot.
JSfiddle link: https://jsfiddle.net/qvjhptpy/
HTML:
<body>
<div class="menu">
<div class="main"></div>
<div class="cut"></div>
</div>
</body>
CSS:
body
{
background: yellow;
}
.menu
{
background: transparent;
font-size: 0px; /*In case a gap is coming between .main & .cut nested DIVs (Due to whitespace in HTML code)*/
}
.main
{
display: inline-block;
width: 200px;
height: 100px;
background: red;
}
.cut
{
display: inline-block;
border: 50px solid transparent;
border-top: 50px solid red;
border-left: 50px solid red;
}
Related
I try to get the middle of the top stripe of the border away but not the whole top, how can I do this?
I am doing Html. I tried a lot but without success I hope anyone can help me.
If I have understood you question correctly, something basic like this would hide the middle of the top border:
.box {
position: relative;
height: 100px;
width: 300px;
border: 10px solid #000;
}
.box .mask {
border-top: 10px solid #fff;
width: 100px;
position: absolute;
top: -10px;
left: 100px;
}
<div class="box">
<div class="mask"></div>
</div>
I'm trying to create a translucent responsive triangle with only one side of it's border colored in a div
I found a way online that uses 2 triangles and placing them on top of one another but the problem is I would like the triangles to be translucent so the background image of the div can be seen
Something like this: http://i.imgur.com/ZxHc3jV.jpg
Thanks alot for your help and any help would be much appreciated!
.container {
width: 33.33%;
height: 500px;
background: blue;
overflow: hidden;
position: relative;
}
.triangle {
width: 100%;
height: 0;
padding-top:100%;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
.triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
border-right: 500px solid #4679BD;
}
<body>
<div class="container">
<div class="triangle"></div>
</div>
</body>
Do you want something like below:-
.triangle{
width:0px;
height:0px;
border-bottom:87px solid red;
border-left:87px solid white;
}
<body>
<div class="triangle"></div>
</body>
I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.
Anyone know how?
Disclosure: Copied from here with a few changes.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top: -1px;
left: -1px;
height: 80%;
width: 1px;
background-color: #fff;
}
<div id="holder">
<div id="mask"></div>
</div>
My suggestion would would be to create an overlay for your image that is 80% of its height.
.image-container {
position: relative;
width: 50%;
}
.image-overlay {
width: 100%;
height: 80%;
border-right: 1px solid #000;
}
.image-with-overlay {
position: relative;
}
Here's a working example: http://jsfiddle.net/dLk6xrvr/
Here is my JsFiddle
I wish to write the text "OR" in the center of the border. I did it with absolute position. Is there any better solution then this.
.test {
width: 300px;
height: 300px;
border-right: 1px solid #000;
position: relative;
}
.test::after {
content: 'OR';
position: absolute;
background: #FFF;
left: 291px;
top: 140px;
}
What you are doing is fine. What is "better" is subjective because that would depend on your specific use-case.
Assuming from the word "OR", that you want to use that div as a separator for content.
In that case one problem I see is with the large fixed width (300px) which, can put you in a tight spot when trying to use that as a separator for content. You would have to put one content in that div and the other alternative (to be compared with "or") in another and somehow stack them together. You might have trouble getting this in a fluid layout.
If I am right, you are trying to have something like this:
Demo: http://jsfiddle.net/abhitalks/rNQjX/15/
Idea is to use a separate div and use that purely as a separator. This will allow you to change separator independent of content. With this layout, changes in browser/window width/height will be fluid.
Example Markup:
<div></div> <!-- regular page content -->
<div class="wrap"> <!-- wrapper for comparison content -->
<div class="content"></div> <!-- content option 1 -->
<div class="sep"></div> <!-- *** Seperator *** -->
<div class="content"></div> <!-- content option 2 -->
</div>
<div></div> <!-- regular page content -->
Example CSS:
div.wrap { /* wrapper for comparison content */
height: auto;
background-color: #ccc;
position: relative;
}
div.content { /* content div */
float: left;
width: 50%;
}
div.sep { /* separator div */
width: 1px;
border: 1px solid gray;
margin-left: -3px;
position: absolute;
top: 0px; bottom: 0px;
left: 50%;
}
div.sep::after { /* separator text */
content:'OR';
position: absolute;
top: 48%; left: -14px;
background-color: #ccc;
}
Your code looks fine to me, I posted below a slightly modified version.
http://jsfiddle.net/rNQjX/14/
.test {
width: 300px;
height: 300px;
border-right: 1px solid #000;
position: relative;
}
.test::after {
content:'OR';
background: #FFF;
position: inherit;
margin-left: 291px;
top: 140px;
}
You can try this one with exact vertical alignment without position absolute :
http://jsfiddle.net/kongkannika/rNQjX/18/
.test {
width: 300px;
height: 300px;
border-right: 1px solid #000;
}
.test::after {
content: 'OR';
background: #FFF;
line-height: 300px;
margin-left: 290px;
}
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}