I would like to add that line in border property, not create new div.
Is it possible?
http://i.stack.imgur.com/9SsYo.png
You can use CSS3 transform style to do that. You can use jQuery aswell: How to rotate a div using jQuery
If you choose to use CSS3 transform style, you need to set border of your div and rotate it. If you have something (image, text, etc) in your div, it will rotate with the div, so you need to un-rotate them using the same method.
If this doesn't help you, paste your code in jsFiddle and it will be way easier to help you. Good luck.
Not sure, but if you are looking to clip:
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%);
clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%);
You can use css pseudo classes to do this.
https://jsfiddle.net/L87jf1d8/2/
Use :before and :after to the box class
<div class="box">
Name
</div>
Css:
.box{
padding:30px;
text-align:center;
width:200px;
border:1px solid #000;
}
.box:after,.box:before{
content: " ";
width: 55px;
height: 1px;
transform: rotate(-45deg);
background: #000;
position: absolute;
}
.box:after{
margin-left: 64px;
margin-top: 29px;
}
.box:before{
margin-left: -120px;
margin-top: -12px;
}
Define a slant class like the following and apply it to any div regardless of its size:
Note that you should also set overflow: hidden; on main element;
.box1, .box2, .box3 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
overflow: hidden;
margin-top: 10px;
}
.box2 {
width: 200px;
}
.box3 {
width: 300px;
}
.slant:before, .slant:after {
content: '';
border: 1px solid tomato;
display: inline-block;
transform: translate3d(-50%, -50%, 0) rotate(45deg);
position: relative;
top: 0;
right: 0;
width: 30px;
height: 30px;
}
.slant:after {
transform: translate3d(-150%, -50%, 0) rotate(45deg);
top: 100%;
left: 100%;
}
<div class="box1 slant"></div>
<div class="box2 slant"></div>
<div class="box3 slant"></div>
Related
I'm trying to replicate a design using CSS, a simplified example of this is below:
The pink background should be 50% opacity, however the blue offset shadow/border should be 100% opacity.
I can do the general shapes but not in a way to achieve the desired transparency.
Here is an attempt I made:
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
}
.content-wrap {
position: relative;
z-index: 1;
filter: drop-shadow(13px 15px 0 rgb(0,255,255));
width: 60%;
height: 100%;
}
.content {
clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
background: rgba(255,0,255, 0.5);
height: 200px;
}
.background {
z-index: 0;
position: absolute;
top: 20px;
left: 0;
background: black;
width: 500px;
height: 90px;
margin-top: 50px;
}
<div class="container">
<div class="content-wrap">
<!-- Blue -->
<div class="content">
<!-- Pink -->
</div>
</div>
<div class="background">
<!-- Black -->
</div>
</div>
A couple of aspects are not quite right:
The drop-shadow is visible through the pink, it should just be outside of the element.
The blue should extend to the left-hand edge.
The blue is transparent when I have not assigned it to be, it seems to be related to the child element's background being transparent.
Are there any CSS masters who can figure out a way to do this? The HTML can change if needed.
a box-shadow with skew transformation can do the job here. I am using pseudo-element for the sake of the demo but you can replace them with real elements
.box {
margin: 10px 0;
display: flex;
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: 30% 0;
background: black;
}
.box::after {
content: "";
height: 200px;
width: 50%;
transform-origin: top;
transform: skew(-20deg);
background: rgb(255 0 255/80%);
box-shadow: 25px 25px 0 blue;
}
body {
margin: 0
}
<div class="box">
</div>
As shown in image , there is navy blue color given to div inclinedly, how can do it using bootstrap in asp.net core project?
You cannot do with bootstrap. However i have used CSS Path to create the same shape
You can use this website to make CSS Path
.backgroundCover {
height: 200px;
width: 200px;
background: blue;
border:1px solid black;
}
#clipPath {
height: 200px;
width: 200px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="backgroundCover">
<div id="clipPath">
</div>
</div>
You can also use the :after and :before pseudo elements to create rectangles and then rotate them. This has higher support rate by using transform instead of clip-path in terms of old browsers.
body { background: black; }
.container {
width: 200px;
height: 260px;
background: white;
overflow: hidden;
position: relative;
}
.container:before,
.container:after {
content: '';
width: 50%;
height: 50%;
position: absolute;
background: #0d2e41;
bottom: -25%;
}
.container:before {
transform: rotateZ(135deg);
left: -25%;
}
.container:after {
transform: rotateZ(225deg);
right: -25%;
}
<div class="container">
</div>
I would like to make a diamond in a rectangle. I've already did it with a square :
.box {
width:100px;
height:100px;
background:orange;
z-index:1;
position:relative;
}
.box:before {
position:absolute;
content:'';
width:70.71%;
height:70.71%;
transform: rotate(45deg);
background: red;
top: 15%;
left: 15%;
}
<div class="box"></div>
But I want to make it like this :
The rectangle is responsive so it's never the same size. Any idea ?
Thanks a lot
This approach uses two triangles generated using CSS border.
I don't think you can use % for borderwidth, so I have used viewport units instead.
.box {
width: 50vw;
height: 25vw;
background: orange;
z-index: 1;
position: relative;
}
.box:before,
.box:after {
content: '';
position: absolute;
width: 0;
height: 0;
}
.box:before {
border-right: solid 25vw red;
border-top: solid 12.5vw transparent;
border-bottom: solid 12.5vw transparent;
}
.box:after {
right: 0;
border-left: solid 25vw red;
border-top: solid 12.5vw transparent;
border-bottom: solid 12.5vw transparent;
}
<div class="box"></div>
You're attempting to create a diamond by modifying a rectangle. If you tried that with a paper rectangle, you'd understand it's not the simplest way to go about it.
You could use clip-path:
.diamond {
background-color: #eee;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin: 0 auto;
text-align: center;
padding: 2rem;
}
<div class="diamond">I'm a diamond</div>
... and all that's left for you to do is to set it's width, height (or min-* / max-* for any of them) in order to control its proportion responsively.
Do note CSS clip-path is currently supported by only ~88% of actively used browsers most notably lacking support by IE and Edge.
If you need support for those, the only way to do it is by using two levels of wrappers and construct the outline from ::before and ::after pseudos of those wrappers.
I want a div that has an "angle like shape on the left". How can I create this with CSS3 only? I am assuming this requires 2 divs? I know I can make a rectangle div and fill it back, and have yellow text. Though I don't know what I can do to make the triange shape on the left. Can it be done with done div only? Or does it need 2? Looking for the best way to do this.
You can achieve this using linear-gradient. Demo:
.text {
width: 400px;
background-image: linear-gradient(45deg, transparent 50px, black 50px);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
Why not try something like this:
.triangle {
width: 0;
height: 0;
border: 50px solid black;
border-bottom-color: transparent;
border-left-color: transparent;
float: left;
}
.text {
width: 400px;
height: 100px;
background-color: black;
float: left;
color: yellow;
}
<div class="triangle"></div>
<div class="text"><h1>Some Name Here</h1></div>
See How do CSS triangles work? for more info on this.
You can use of Pseudo Elements ::before or ::after
.triangle {
padding: 10px;
position: relative;
background-color: #000;
color: yellow;
display: inline-block;
margin-left: 40px;
}
.triangle::after {
content: "";
position: absolute;
border: 19px solid #000;
height: 0;
width: 0;
left: -38px;
top: 0;
bottom: 0;
margin: auto;
border-left-color: transparent;
border-bottom-color: transparent;
}
<div class="triangle">
text-here
</div>
Link for reference
Style Accordingly.
You can use clip-path but it has not so good browser support. I'm using 100vmax 100vmax here to achieve 45 degrees clipping. Demo:
.text {
width: 400px;
background-color: black;
-webkit-clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
clip-path: polygon(100vmax 100vmax, 0% 0%, 100% 0%, 100% 100%);
padding-left: 100px;
color: yellow;
}
<div class="text">
<h1>Some Name Here</h1>
</div>
I am looking for a way to create a div with CSS that looks like this graphic:
The bottom on the right is not white but transparent.
How would that be possible?
Method #01:
Use transformed pseudo element i.e :before or :after.
body {
background: #ccc;
}
div {
position: relative;
overflow: hidden;
height: 100px;
}
div:before {
transform: rotate(-3deg);
position: absolute;
background: brown;
height: 100%;
bottom: 40%;
content: '';
right: -50px;
left: -50px;
}
<div></div>
Method #02:
Use css3 linear-gradient.
background: linear-gradient(175deg, brown 60%, transparent 60%);
div {
background: linear-gradient(175deg, brown 60%, transparent 60%);
height: 100px;
}
<div></div>
You can use transformations. Here is an example.
#me {
margin-left:-100px;
margin-top:-100px;
width:150%; height:200px;
color:#FFF;
background-color:#8B1414;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#wrapper {
min-height:200px; background-color:#000; padding:20px; overflow:hidden;
}
<div id="wrapper">
<div id="me">asdf</div>
</div>
You can use a linear-gradient background. This would work like this:
<div class="box">
</div>
.box {
width: 700px;
height: 100px;
background: linear-gradient(to left top, transparent 50%, red 50%)
}
Or you could use CSS transform to rotate the box. How to do this you can see here
You haven't specified if the width is constant, so I'll assume it is not (responsive design?) and I also assume, that you want to have a constant angle independently on the width of the <div></div>.
To achieve this you will, however need to use SASS with some math-enhancing libraries (ie. Compass, Sassy-Math). These will give you the pow(), sqrt(), and sin() functions necessary for the Pythagorean calculations.
Here is the basic function that will calculate the height of the tilted edge depending on the angle you want the tilt to take.
#function get-tilted-height($angle) {
$a: (100% / 1%);
$A: (90deg - $angle);
$c: ($a / sin($A));
$b: sqrt(pow($c, 2) - pow($a, 2));
#return (abs($b) * 1%);
}
Now for the SASS mixin.
#mixin tilted($angle, $color, $position: 'top', $pseudo: 'before') {
$height: get-tilted-height($angle);
position: relative;
background-color: $color;
&::#{$pseudo} {
content: '';
padding-top: $height;
position: absolute;
left: 0;
right: 0;
#if ($position == 'top') {
bottom: 100%;
background-image: linear-gradient($angle, $color 50%, transparent 50%);
} #else {
top: 100%;
background-image: linear-gradient($angle, transparent 50%, $color 50%);
}
}
}
Then you just include the mixin in your code like this:
.container {
#include tilted(3deg, rgb(255, 255, 255), bottom);
padding: 0 1em;
max-width: 80%;
margin: 0 auto;
filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}
Note the position: relative that the container aquires, so then we can position the ::after pseudo-element absolutely. Also the height of the tilt is defined by padding-top as you can't rely on height that is computed from the parents height.
My credit goes to Hugo Giraudel and his brilliant article on Sitepoint, which I recommend you to read to find out more details. And here is a link to CodePen where you can see it in action: http://codepen.io/SitePoint/pen/dppJzX
You can also do this way.
.container{
position:relative;
width:100px;
height:40px;
overflow:hidden;
background-color:transparent;
}
.child{
position:absolute;
top:-40px;
left:-30px;
width:150px;
height:60px;
background-color:#8D120D;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
<div class="container">
<div class="child">
</div>
</div>