Click for the problem's illustration
How should I implement this, given the fact that the background is not solid? I was trying different solutions, but none of them fully fit
Start like this,
<div id="box">
<div id="rectangle"></div>
</div>
CSS
#box {
height: 100px;
width: 400px;
overflow: hidden;
background-color: black;
}
#rectangle {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 300px solid white;
}
Related
Here is a simple code I'm testing
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Fiddle: https://jsfiddle.net/xhsngt3q/
On one monitor I get this
On the other one there's a white pixel border on the right and bottom
Any tips on how to remove that?
I think it is caused because of the number of pixels of the image.
I would suggest to add a black background to your image like the following CSS code:
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 5px solid black;
/*My change*/
background-color: black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Hope this could be useful. Greetings.
You can also try with max-width:199px or max-width:202px
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
/*My change*/
max-width: 199px;
border: 5px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
Add box-shadow 0 0 0 1px; instead of the solid border. It is just a work around but sometimes good enough.
div {
background-color: white;
height: 100%;
width: 100%;
}
img {
max-width: 200px;
border: 4px solid black;
}
<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 4 years ago.
I have to draw half diagonal triangle in card i tried but i don't know how to bring the exact output as shown in this image and i have uploaded my code too, so please if anyone know how to achieve as same like image please let me know for reference i have upload the excepted output image here Output
.cards{
border-bottom: 148px solid red;
border-left: 158px solid transparent;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
You need to increase border width and set alignment to right to achieve this. Check updated snippet below:
.cards {
border-bottom: 180px solid red;
border-left: 280px solid transparent;
float: right;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
overflow: hidden;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
You can work with positioning to achieve this.
.cards{
border-bottom: 248px solid red;
border-left: 358px solid transparent;
position: absolute;
bottom: 0;
left: -50px;
}
.empty-space-section6 {
height: 411px;
width: 230px;
border-color: gray;
margin-left: 20px;
margin-top: 16.5px;
margin-bottom: 52.5px;
background-color: #FFFBE2;
position: relative;
overflow: hidden;
}
<div class="empty-space-section6">
<div class="cards">
</div>
</div>
I would consider to use instead a simple linear-gradient as the background so you wouldn't need to mess with borders.
e.g.
article {
width: 240px;
height: 360px;
box-shadow: 0 0 5px #999;
background: linear-gradient(-25deg, #9864bb 160px, #ffffff 162px);
}
<article></article>
In this example the gradient starts from bottom to top but of course you can change how it is anchored and the color-stop values.
How to get triangle layout of 'mission' section within the container only without using "polygon". I don't want it to flow outside the container.
You can make triangles using border property of css.
Check out this link for more shapes : https://css-tricks.com/examples/ShapesOfCSS/
.container {
position: relative;
}
.mission {
position: absolute;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid red;
border-bottom: 0px solid transparent;
}
.mission + div {
position: absolute;
}
.content {
position: absolute;
width: 350px;
height: 200px;
background: lightgrey;
padding-left: 100px;
}
<div class="container">
<div class="content">
Content
</div>
<div class="mission">
</div>
<div>
Mission
</div>
</div>
I have this set of divs in may page and I can not get the whole lot to re-size on browser window re size, I have tried to use some Jquery coding found on this site but it seems that the Divs are only resizing on width rather than on both w & H.
My image for divs is on this link:
www.beemagic.co.uk/mydiv.html
Not really sure what your after, from the looks of it you want the whole site to be able to be resized?
I come up with this very basic JSFiddle that shows that it can be done if that's really how you want it.
HTML:
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="slider"></div>
</div>
</div>
CSS:
.wrap {
height: 1000px;
width: 100%;
border: green 2px solid;
}
.header {
height: 19%;
width: 99.6%;
border: blue 2px solid;
margin: 5px;
}
.content {
height: 79%;
width: 99.6%;
border: red 2px solid;
margin: 5px;
}
.side {
height: 85%;
width: 20%;
border: purple 2px solid;
margin: 5px;
}
.slider {
height: 10%;
width: 99%;
border: gold 2px solid;
margin: 5px;
}
DEMO HERE
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.