Hello is it possible create a triangle with inverted rounded corner in the center of a rectangle, like in many landing page. Something like the below image:
I found something similar here but without inverted rounded corner
CSS Inverted Triangle image overlay
Yes, it is possible to achieve this effect by using two pseudo-elements. We need to position one of the pseudo-elements with respect to the left of the container while other is positioned with respect to right of the container. Then by adding a transform: skew() on them in opposite directions and assigning a border-radius to the required sides we can get the required output.
div {
position: relative;
height: 50px;
width: 100%;
padding-top: 50px;
background: blue;
background-clip: content-box;
/* make sure blue background doesn't appear behind triangle */
overflow: hidden;
color: white;
}
div:before,
div:after {
position: absolute;
content: '';
top: 0;
width: calc(50% + 10px);
/* don't change */
height: 50px;
/* must be equal to padding-top */
background: blue;
}
div:before {
left: 0;
transform: skew(45deg);
transform-origin: right bottom;
border-top-right-radius: 12px;
}
div:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
border-top-left-radius: 12px;
}
<div class='shape'>This is a shape.</div>
Related
Hi guys i have a question about doing circle in css and bootstrap.
i have a bootstrap button with border-radius is equal to 50%.
my goal here is to make a separate border radius when its active
My first approach is manipulating the outline, i have some improvement but
i can't make my outline circle , so my next question is it possible to make outline circle? thanks guys
Use an absolutely positioned pseudo element that goes outside of the button.
button {
width: 100px;
height: 100px;
display: inline-block;
background: purple;
position: relative;
margin: 1em;
}
button, button:after {
border: 3px solid black;
border-radius: 50%;
}
button.active:after {
position: absolute;
top: -1em; left: -1em; right: -1em; bottom: -1em;
content: '';
background: linear-gradient(90deg, black, white);
transform: rotate(45deg);
transition: transform .25s;
}
<button class="active">button</button>
<button>button</button>
I want to create a horizontal line similar to the one found on this post and marked as the solution but only with the shadow appearing at the bottom.
The closest I can get is getting the shadow shown in the middle of the line, both up and down.
Like this?
.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
.fancy-line:before {
top: -0.5em;
height: 1em;
}
.fancy-line:after {
height: 0.5em;
top: calc(-0.5em + 1px); /* adjusted this */
}
.fancy-line:before, .fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
.fancy-line, .fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
}
body, .fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<div class="fancy-line"></div>
The original code generates a radial gradient and covers the bottom half of it with a block colored the same as the background. Adjusting it to your requirements is just a matter of moving the covering piece from the bottom to the top.
Also, note: hr elements are required to be self closing. This precludes the use of :before and :after since self-closing elements can't have children. In the referenced answer, they weren't using any particular feature of hr, so I've converted it to a div here.
Take a look at this: http://jsfiddle.net/9rovqvoj/1/
It's basically the same, but adding a mask before pseudo element :before instead of :after and added a z-index to it.
hr.fancy-line:after {
top: -0.5em;
height: 1em;
}
hr.fancy-line:before {
content: '';
height: 0.5em;
top: -0.5em;
z-index: 999;
}
How can I use HTML and CSS to make a div with an image inside it that is clipped and masked so that it looks like the following:
I've been trying to find a way to do this for about 2 hours now and got nowhere so I was just hoping someone could point me in the right direction. To be specific here, I wish to clip the image such that the top two corners are rounded, and embed it in a div element with four rounded corners and a 1/4 bottom padding, with both elements transformed such that it appears the right edge is further away from the viewer than the left.
In order to create such an effect, where the image remains the same, but the outer shape has this perspective look, you could use something similar to the demo below.
div.inner {/*gives top section effect, also crops the image*/
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
height: 200px;
width: 300px;
overflow: hidden;
border: 10px solid red;
transform: skewY(5deg);
}
.inner img {/*removes transform skew from image*/
transform: skewY(-5deg);
transform-origin: top left;
height:100%;width:100%;
}
.wrap {
display: inline-block;
height: 200px;
width: 300px;
position: relative;
/*for demo only*/
margin: 100px 100px;
}
.wrap:after { /*give bottom section the effect*/
content: "";
position: absolute;
bottom: -50%;
left: 0;
height: 100%;
width: calc(100% + 20px);
transform: skewY(-10deg);
transform-origin: bottom right;
background: red;
z-index: -1;
border-radius: 20px;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/500/500" />
</div>
</div>
In order to create the effect, I have had to incorporate this wrapper div. This allows the use of a pseudo element (the :after css) to generate the lower part of the shape:
+----------------------------+
| |
| _______/ <-- curved corner
| ------/
| ------/
\-----/
/\
\_____ also curved corner
The inner div is then hence used to generate the upper part of the shape. Using the skew declaration, the shape allows the opposite of the :after element, bringing the right hand side of the red shape down wards.
The overflow:hidden ensures any part of the image that does not fit within this inner div will be cropped (the border-radius:20px 20px 0 0; ensures only the upper corners are affected).
The last point to note is the .inner img css. Since I have skewed the .inner div, it is important to then 'unskew' the image so it remains the rectangular shape. This is why there is a 'counter-skew' here (transform: skewY(-5deg);).
Here's my attempt using perspective.
Thanks to #vals for the pointing out that perspective can be used as part of the transform.
* {
box-sizing: border-box;
}
figure {
perspective: 1000px;
width: 420px;
margin: 5em auto;
height: 350px;
background: red;
text-align: center;
padding: 10px;
border-radius: 25px;
transform: perspective(1200px) rotateY(50deg);
}
img {
border-radius: 20px 20px 0 0;
}
<figure>
<img src="http://lorempixel.com/400/200/sports/1/" alt="" />
</figure>
Through help on stackoverflow I've been able to generate and position a CSS triangle in the correct position on my website, I've also learnt how to color a triangle in 2 equal halves.
But I am stuck on merging the two examples together, what I've tried I don't think is worth pasting here due to the mess I've made of it.
I am trying to get a triangle that has the proportions and sits at the bottom of the div like this fiddle example and then is split in 2 colors like this fiddle example.
Where I believe I am going wrong is that in the different fiddles there are different uses of:
:before
Well..., Here is my attempt to achieve this effect (proportions + split in 2 colors):
JSFiddle Demo.
In this demo, I added the triangle to the .bottom div and positioned that to stay at the top (with a negative value).
Then added margin-top: 1%; property to move the triangle when resizing the window:
HTML
<div class="top"></div>
<div class="bottom">
<div class="triangle"></div>
</div>
CSS:
.top {
/* other styles... */
position: relative;
z-index: 2;
}
.bottom {
background: lightGreen;
height: 100px;
position: relative;
z-index: 1; /* A lower z-index value than .top */
/* Or use overflow: hidden; instead */
}
.triangle {
width: 40px;
height: 20px;
position: absolute;
left: 0;
right: 0;
top: -20px;
margin: auto;
margin-top: 1%; /* Move the triangle when resizing the window */
z-index: 1;
}
.triangle:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent blue transparent transparent;
}
.triangle:after {
content: " ";
position: absolute;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: red transparent transparent transparent;
}
I'm afraid I'm facing a render glitch in the current Firefox (24.0), while Chrome (30) renders the same code as expected.
Here's the code: http://dabblet.com/gist/6982745
HTML:
<div class="triangle"></div>
CSS:
.triangle {
height: 50%;
width: 40%;
position: relative;
top: 50px;
left: 50px;
background-color: black;
overflow: hidden;
/*
* Here comes the malicious line:
*/
transform: rotate(-18deg);
}
.triangle:before {
content: "";
width: 200%;
height: 300%;
position: absolute;
background-color: white;
transform-origin: left top;
transform: rotate(-52deg);
}
.triangle:after {
content: "";
width: 200%;
height: 300%;
position: absolute;
top: 38%;
background-color: white;
transform-origin: left top;
transform: rotate(26deg);
}
Basically, there's a black square (.triangle) which is partially covered by rotated white squares (:before and :after) to create a triangle. The black square itself is rotated by 18 degrees - which causes Firefox to render some kind of gray border around .triangle - even if the both white squares should cover every pixel in this area.
Chrome, as a reference, omits such a border.
A little experimenting showed me that the glitch only occurs with rotations other than 0°, 90°, 180° ...
My questions are: Am I doing something wrong? (I know that there are simpler ways to create a triangle - it's just a simplified example) Is there a known workaround for this glitch? I already tried box-shadow and border - both without success.
Thanks in advance :)