I have been playing for a long time trying to achieve this using inset shadow css3 property. I would like to inset the blue triangle inside a div like I've seen the outside triangles done using just a border css property.
Can someone please advise me is the inset shadow approach good, or should I use some other way? How can I achieve this effect? Insetting a triangle using pure css?
It's not possible using box-shadow, however you could use a triangle on a :pseudo-element instead.
div {
position: relative;
width: 100px;
height: 100px;
background: black;
}
div:after {
position: absolute;
content: '';
width: 0;
height: 0;
bottom: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 20px solid #3D6AB3;
-moz-transform: scale(0.999);
-webkit-backface-visibility: hidden;
}
<div></div>
Related
I have tried few but is there a way to create an outline to right side of the div?
somthing like the purple line in the below image
https://unsee.cc/geduzopi/
use a pseudo element absolutely positioned to the right of the parent, then use translateX() to push it outside of the parent.
div {
display: inline-block;
width: 5em;
background: orange;
text-align: center;
position: relative;
}
div:after {
content: '';
width: .5em;
background: purple;
position: absolute;
right: 0; top: 0; bottom: 0;
transform: translateX(200%);
<div>1</div>
You can use border-right. For example
border-right: aqua 2pt solid;
See
https://www.w3schools.com/cssref/pr_border-right.asp
If you want to create an outline on one side and NOT a border, you can use box-shadow with inset like I did in my codepen example below. My example is good to look at if you have a border radius.
https://codepen.io/drewkiimon/pen/qeWQVx
div {
background: pink;
height: 250px;
width: 250px;
box-shadow: inset 0 1px black;
}
<div>
</div>
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
This question already has answers here:
How to bevel the corner of a block div?
(4 answers)
Closed 8 years ago.
I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.
I am using css ...
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
...to 'skew' the rectangle to create the Parallelogram.
I am wondering if the right side can be made straight?
Would it require :before and :after in the css?
Any help of this would be great.
Thanks,
Phil
You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.
Option 1: (Using the border hack)
In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.
Change the below
border-color: transparent blue blue transparent;
to
border-color: transparent red red transparent;
Note: When using this method, it is difficult to add an extra outer border to the shape.
Snippet:
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: red;
margin-left: 50px;
color: white;
}
.trapezoid:after{
position: absolute;
content: '';
left: -50px;
top: 0px;
border-style: solid;
border-color: blue transparent blue transparent;
border-width: 100px 0px 0px 50px;
}
<div class="trapezoid">Some dummy text</div>
Option 2: (Using skew)
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: beige;
border: 1px solid red;
border-left-width: 0px;
margin-left: 50px;
}
.trapezoid:before{
position: absolute;
content: '';
left: -25px;
top: -1px;
height: 100px;
width: 50px;
background: beige;
border: 1px solid red;
z-index: -1;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
transform: skew(20deg);
}
<div class="trapezoid">Some dummy text.</div>
Add this id to any div youll see the expected result
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
height: 0;
width: 100px;
}
JSFIDDLe
I found various examples of how to create triangles using CSS (like this one); all of them are based on creating a 0-sized box and fiddling with borders to create the triangle shape. Ok, very nice.
But how can I actually place something inside such a triangle?
You can use positioning techniques to place some content over the triangle and not under the triangle..
I emphasized over and under because using positioning am positioning the text over the triangle, so triangle element isn't the parent of the content, as to create triangles we use height: 0; and width: 0; so you need to overlay the text.
Just make sure you use position: relative; for parent element holding absolute positioned element.
Didn't used z-index but you can use that to play safe with the stacking order.
Demo
<div class="wrap">
<div class="triangle"></div>
<span>Hello</span>
</div>
div.wrap {
position: relative;
}
div.triangle {
height: 0;
width: 0;
border: 50px solid #f00;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
div span {
position: absolute;
left: 35px;
bottom: 0;
}
This way can be sloppy but it would work for a basic situation.
http://jsfiddle.net/Yc5nF/1/
<div class="arrow-right">
<p>Foobar</p>
</div>
.arrow-right {
position: relative;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-bottom: 150px solid green;
border-right: 150px solid transparent;
}
.arrow-right p {
position: absolute;
top: 70px;
left: -20px;
}
In this jsfiddle, I'm trying to create a bookmark shape. There is only one triangle which needs to change its positioning.
<div id = "bookmark">
<div id = "rectangle"></div>
<div id = "triangle-topleft"></div>
<div id = "triangle-topright"></div>
</div>
I could easily use relative positioning and shift it, but I don't want to do it this way. I want a more malleable solution.
Instead of the shapes flowing from top to bottom. I want the last shape to flow left to right. So there are 3 shapes, the first two are in the perfect place, but the third one needs to be placed to the right of the second shape, instead of underneath it.
What CSS can I use to do this?
Add float:left; to #triangle-topleft and margin-left:100px; to #triangle-topright
#triangle-topleft {
position: static;
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
float:left;
}
#triangle-topright {
position: relative;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
margin-left:100px;
}
jsFiddle example
First of all you do not have to declare position: static; as it is already static by default (Unless you are using responsive design where you need to reset the property value at certain point of resolution), secondly, assign position: relative; to your #bookmark and make the second triangle position: absolute;
Demo
#bookmark{
width: 200px;
position: relative;
}
#rectangle {
width: 200px;
height: 300px;
background: black;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
}
#triangle-topright {
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
bottom: 0;
}
Note: Make sure you do not make your first triangle position: absolute; else you need to reposition the triangles. But this is the best method you can get, as you've wrapped absolute inside a relative container.
You can also take a look at this awesome thing - Font Awesome - Bookmark, you can resize this to whatever size you want to.
The thing you are trying can be also achieved by using :before and :after pseudo along with content property. So you can get rid of the extra triangle elements.
As I said, you can create this thing with a single element.
#bookmark{
width: 200px;
position: relative;
height: 300px;
background: black;
}
#bookmark:before {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
display: block;
content: "";
position: absolute;
bottom: -100px;
}
#bookmark:after {
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
bottom: -100px;
display: block;
content: "";
}
Here, am using :before and :after pseudo, with display: block; and content: ""; which are essential to get this thing work, also am positioning both the elements using absolute with a value set to -100
Demo (Using single element)
Note: :before and :after pseudo can fail in older versions of IE,
but you can always use polyfills to use CSS 3 properties, also, for
more information on browser support, you can check this out.
You can just add float: left to #triangle-topleft and margin-left: 100px to #triangle-topright.
To remove unnecessary markup, you could also use :before and :after pseudo-elements instead of #triangle-*.
Add display:inline-block to both triangle shapes. They're stacking because they are defaulting to display:block.
It suffices to just add float:left to #triangle-topleft and #triangle-topright.
See the fiddle: http://jsfiddle.net/nfxYE/