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>
Related
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>
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/
I would like to know if I can only have one of my 2 divs being hidden but not the other one
http://codepen.io/LeaFrontend/pen/yyNbeb
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 300px;
height: 100px;
overflow:hidden;
}
.box1 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid green;
top: 90px;
}
.box2 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid blue;
left: 290px;
}
I need to keep the same structure
Not sure if that is possible
Here's what you do:
A. Kill the overflow property in the .container block of CSS code.
B. Then use the values for top, bottom, left and right properties to make it overflow to the direction that you want.
C. Use negative value for for the area you want it to overlap. If you want box1 to overlap to the right by 100px, set the right property value -100px.
right: -100px;
I have a div with a border of 1 px. I have a square transparent-in-parts png image much smaller than the div 48px * 48px.
I'd like to position the square image such that it overlays the top left border of the div giving the appearance of both top and left borders going underneath the image.
Using background-image 'left top' puts the image inside the div borders which is not what I'm looking for. Wish I could show an example but I don't have any. Hope my question describes it well.
Here's the JSFiddle: http://jsfiddle.net/9sn22/1/
<div id='mybox'>text</div>
#mybox {
text-indent: 0.5in;
background-image:url('http://aerbook.com/site/images/quote-mark-icon-black.png');
border-radius:3px;
border: 1px solid #cccccc;
height: 300px;
font-weight: 200;
text-indent: 0.35in;
padding: 20px;
background-repeat:no-repeat;
background-position: left top;
}
Not quiet getting your question as there are no images or any demo for the desired effect you are trying to achieve, but from what I understood, you can use position: relative; for the container div and use a literal img tag inside the div and use position: absolute; with top: -1px; and left: -1px; respectively.
If you are trying to make the background-image move out of the element area than it's not possible...you need to use img for this
<div>
<img src="#" />
</div>
div {
position: relative;
border: 1px solid #000;
}
img {
position: absolute;
left: -1px;
top: -1px;
}
Update: (After you added a demo)
Do you need something like this?
do you mean something like this? http://jsfiddle.net/q44k5/
html:
<div> </div>
css:
div{
border: 1px solid red;
height: 100px;
width: 100px;
position: relative;
margin: 50px;
}
div:before{
content: '';
height: 20px;
width: 20px;
position: absolute;
top: -10px;
left: -10px;
background: green;
}
try this css below
#cLeft{
position:absolute;
}
background: #ffffff url('http://spikyarc.net/images/down_Arrow.png') no-repeat top left;
try this html below
<img id="cLeft" src="http://spikyarc.net/images/down_Arrow.png" />
<div class="content">
Your Text here.
</div>