Is there a css where I could size and position the border-left property? Or a "hack"? Below shows what I'd like to have. The black rectangle represents the column and the red, the border I'd like to have on that column. Possible?
If not, could I add another div inside then give that div the border property?
You can use :before pseudo element with position: absolute
.column {
position: relative;
height: 200px;
width: 100px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.column:before {
content: '';
height: 50px;
width: 3px;
background: red;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
<div class="column">Column</div>
You can also do this with gradients and background-clip.
div {
width: 100px;
height: 300px;
border-width: 2px;
border-style: solid;
border-color: black black black transparent;
background-image: linear-gradient(white, white), linear-gradient(to bottom, black 30%, red 30%, red 60%, black 0);
background-clip: padding-box, border-box;
}
<div></div>
Related
Is it possible to do curved shadows? I've currently got this design where it's an inset shadow on an element but it has curves, some on the element however, so aren't on the element (the inversed ones)
What i've currently got is an element with a border radius on the top-left and bottom-left and then I using a before and after block with a background radial-gradient to create the effect however, it begins to look stupid when I apply the shadows. Any ideas of what I can do to try and achieve the effect in the image below?
Example image of what I mean:
body { display: flex; justify-content: center; align-items: center; height: 100vh;}
.container {
background: red;
width: 200px;
height: 200px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.block {
width: 160px;
height: 140px;
background: white;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
}
.block:after,
.block:before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background: blue;
}
.block:before {
background: radial-gradient(circle at top left, red 0%, red 75%, white 75%, white 100%);
top: -20px;
}
.block:after {
background: radial-gradient(circle at bottom left, red 0%, red 75%, white 75%, white 100%);
bottom: -20px;
}
<div class="container">
<div class="block">
<p style="font-size: 54px; text-align: center; marign: 0;">👋</p>
</div>
</div>
I have this:
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 50%, transparent 50%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I found the pen online, and want to adjust it for my own usage, however, cannot figure out a few things.
I want to move the blue box lower, so it is not as high, but still keep the same shape. So I tried background position, as one would, and it doesn't change anything. I'm relatively an amateur in css so it is probably a silly question, but a question none the less! Appreciate the help
It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:
From
background: linear-gradient(25deg, yellow 50%, transparent 50%);
to
background: linear-gradient(25deg, yellow 20%, transparent 20%);
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 20%, transparent 20%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
Can I make part (from x1 to x2) of div border transparent?
If not what approach can you advice?
My idea [very bad] is to draw border in canvas element and place it (canvas body is trasparent) over div element.
Since DIVs have only 4 elements (top, bottom, left, right) you can't make part of a border transparent AFAIK.
However, you could create elements that would overlay your div and use relative positioning to build a border to your taste. For example:
<style>
.multiborder{
border:1px solid black;
border-top:none;
width:500px;
height:100px;
position:relative;
}
.top-border-1{
border-top:2px solid red;
width:100px;
position:absolute;
top:0px;
right:0px;
}
.top-border-2{
border-top:3px double blue;
width:300px;
position:absolute;
top:0px;
left:0px;
}
</style>
<div class="multiborder">
<div class="top-border-1"></div>
<div class="top-border-2"></div>
</div>
You can see the result at http://jsfiddle.net/Bekqu/3/.
Here are two possible ways to do this:
Required HTML will remain the same in both methods and is as follows:
HTML:
<div class="box"></div>
Method #01:
Draw the top, right and left borders with border css property.
Draw the bottom transparent border with linear-gradient css property.
CSS:
.box {
/* Following css will create bottom border */
background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
background-size: 100% 8px;
background-position: 0 100%;
/* Following css will create top, left and right borders */
border: solid #000;
border-width: 8px 8px 0;
width: 100px;
height: 50px;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
background-size: 100% 8px;
background-position: 0 100%;
border: solid #000;
border-width: 8px 8px 0;
margin: 20px 15px;
width: 100px;
height: 50px;
}
<div class="box"></div>
Method #02:
Draw the top, right and left borders with border css property.
Draw the bottom borders with :before and :after pseudo elements.
CSS:
.box {
/* Following css will create top, left and right borders */
border: solid black;
border-width: 8px 8px 0;
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
}
/* Following css will create bottom border */
.box:before,
.box:after {
position: absolute;
background: #000;
content: '';
height: 8px;
width: 30%;
bottom: 0;
left: 0;
}
.box:after {
left: auto;
right: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
border: solid black;
border-width: 8px 8px 0;
position: relative;
overflow: hidden;
margin: 15px 10px;
width: 100px;
height: 50px;
}
.box:before,
.box:after {
position: absolute;
background: #000;
content: '';
height: 8px;
width: 30%;
bottom: 0;
left: 0;
}
.box:after {
left: auto;
right: 0;
}
<div class="box"></div>
I am doing website for my friend and now I don't know how to draw something in css.
I want this
I know how to draw this in "AKTUELNO", but I don't know how to create that bottom border that have longer width and skewed sides. Sorry if I didn't explain you very well, but you will understand when you see photo.
I hope you will help me :)
My workaround suggestion using gradients:
html {
height: 100%;
background-image: linear-gradient(pink, white);
}
*, *::before, *::after {
box-sizing: border-box;
}
div {
height: 150px;
width: 300px;
margin-left: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div::before, div::after {
content: '';
display: block;
height: 149px;
width: 50px;
}
div::before {
float: left;
margin-left: -50px;
background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);
}
div::after {
float: right;
margin-right: -50px;
background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);;
}
<div></div>
And here is my try to adopt the solution that was mentioned by #Harry:
body {
background: lightblue;
}
.container {
position: relative;
width: 75%;
margin: 0 auto;
background: rgba(100,100,100,.15);
height: 300px;
text-align: center;
line-height: 300px;
font-size: 3em;
}
.container::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 95%;
top: -2.5%;
padding: 0 50px;
margin-left: -50px;
border: 1px solid black;
-webkit-transform: perspective(50px) rotateX(2deg);
-moz-transform: perspective(50px) rotateX(2deg);
transform: perspective(50px) rotateX(2deg);
}
<div class='container'>
Content Goes Here
</div>
But I think that the robust solution can be achieved by using SVG.
How do I make half a hexagon shape with a border and over top a rectangle shape with a border and an image inside the half hexagon shape using CSS and HTML5
I have no code for this as I have tried but cannot figure out how to do it
I added an image of what I would like to be able to do.
You can create a trapezoid fairly easily with a rectangle and 2 CSS triangles made with some transparent borders using :before and :after.
Working Example:
body {
background: black;
}
.rectangle {
background: #ECECEC;
height: 20px;
}
.trapezoid {
width: 50px;
height: 50px;
position: relative;
margin: 0 auto;
background: #ECECEC;
}
.trapezoid:before,
.trapezoid:after {
content: '';
display: block;
position: absolute;
top: 0;
border: 25px solid transparent;
border-top-color: #ECECEC;
}
.trapezoid:before {
right: 100%;
border-right-color: #ECECEC;
}
.trapezoid:after {
left: 100%;
border-left-color: #ECECEC;
}
<div class="rectangle">
<div class="trapezoid"></div>
</div>
updated with shape and border-colors
div {
margin-top:1em;;
text-align: center;
padding: 0.5em;
border-top:1px solid lightgray;
background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%);
}
img {
position: relative;
display: block;
margin: 10px auto;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
width:320px;
position: relative;
overflow: hidden;
border-top:1px solid lightgray;
background: linear-gradient(to left, lightgray, lightgray) bottom center, linear-gradient(40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom left, linear-gradient(-40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom right;
background-repeat: no-repeat;
background-size: 50% 2px, 50% 100%, 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/55/46/technics/1" alt="ico"/>
</span>
</div>
older codes
a single pseudo and overflow:hidden, can do it too:
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
}
span:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
margin-left: -75px;
height: 150px;
width: 150px;
background: gray;
transform: rotate(45deg);
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
or a gradient (easier probably to draw borders or shadows if needed)
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
background: linear-gradient(40deg, transparent 1.5em, gray 1.5em)bottom left, linear-gradient(-40deg, transparent 1.5em, gray 1.5em)bottom right;
background-repeat: no-repeat;
background-size: 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
Here is a solution using pseudo elements with skew. The image can be overlayed without problems
.rect {
width: 100%;
height: 20px;
background-color: lightgrey;
border-bottom: 1px solid grey;
position: relative;
}
.hex {
width: 200px;
height: 40px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.hex:before, .hex:after {
content: "";
position: absolute;
width: 200px;
height: 40px;
border-style: solid;
border-color: grey;
border-width: 0px 0px 1px 0px;
transform-origin: bottom center;
background-color: lightgrey;
}
.hex:before {
transform: skew(10deg);
border-left-width: 1px;
}
.hex:after {
transform: skew(-10deg);
border-right-width: 1px;
}
<div class="rect">
<div class="hex"></div>
</div>
You can create half octagon using :after.
.halfOctagon {
width: 100px;
height: 50px;
background: #f35916;
position: relative;
top:25px;
left:50px;
}
.halfOctagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #f35916;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
you can try live example in https://jsfiddle.net/kb2tzxq4/
To move the half octagon adjust top and left in css for .halfOctagon