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>
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>
This is a follow-up to his question: Center triangle at bottom of div full width responsively
Again I'm stuck with my CSS for a project involving divs with triangle borders at the bottom:
I want a row of cascading divs to look like this (lower tringle colored red for demonstration purposes):
My code now looks like this:
html, body {
padding: 0; margin: 0;
color: white;
}
.top {
background-color: #282C34;
height: 500px;
width: 100%;
position: relative;
}
.bottom {
background-color: #3B3E48;
height: 500px;
width: 100%;
}
.triangle {
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
width: 0;
height: 0;
bottom: -40px;
content: "";
display: block;
position: absolute;
overflow: hidden;
left:0;right:0;
margin:auto;
}
.upperTriangle {
border-top: 40px solid #282C34;
}
.lowerTriangle {
border-top: 40px solid red;
}
<div class="top">
<div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
<div class="triangle lowerTriangle"></div>
</div>
<div class="top">
<div class="triangle"></div>
</div>
Code on JSFiddle: http://jsfiddle.net/rndwz681/
My problems:
I can't figure out how to align the triangles correctly on the z axis.
I can't figure out how to align the triangles correctly with the divs apart from the first one.
Thanks a lot in advance for the help.
Powered by CSS triangle generator
.container {
width: 100%;
overflow: hidden;
}
.block {
width: 100%;
height: 200px;
}
.block--arrow {
position: relative;
}
.block--arrow:before {
display: block;
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -350px;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 350px 0 350px;
}
.grey {
background: #626262;
}
.light-grey {
background: #999999;
}
.light-grey:before {
border-color: #626262 transparent transparent transparent;
}
.black {
background: #000000;
}
.black:before {
border-color: #999999 transparent transparent transparent;
}
<div class="container">
<div class="grey block"></div>
<div class="light-grey block block--arrow"></div>
<div class="black block block--arrow"></div>
</div>
By adding position:relative; to your .bottom class and adding z-index:100; to your .triangle class I was able to get your triangles to appear the way you want them to.
See my fiddle: http://jsfiddle.net/rndwz681/1/
z-index sets the "layer" that an object appears on (higher number = closer to the user). It can only be applied to 'positioned' elements, but your absolute-positioned triangles qualify.
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;
}
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 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;
}