So, I'm trying to make a top right corner ribbon. I'm doing this successfuly but the issue that I have is that I cannot find a way to make the top right corner to have a slight border-radius of lets say 10px. I tried border-radius: 0px 0px 0px 10px (changing all the values) and as well as border-top-right-radius:10px and none of those worked. Any solution will be appreciated.
.corner-ribbon {
position: absolute;
top: 0px;
right: 0px;
width: 0;
height: 0;
border-top: 100px solid #ED5565;
border-left: 100px solid transparent;
}
.corner-ribbon .test-text {
transform: rotate(45deg);
position: absolute;
right: 10px;
bottom: 60px;
color: white;
text-transform: uppercase;
}
<div class="corner-ribbon">
<span class="test-text">Some text</span>
</div>
Based on the given code, you can add a wrapper and make it the same size as your ribbon, then apply your border radius with overflow hidden. Since you are making the shape with borders so applying border radius on your existing elements would not work.
.corner-ribbon {
border-top: 100px solid #ED5565;
border-left: 100px solid transparent;
}
.corner-ribbon .test-text {
transform: rotate(45deg);
position: absolute;
right: 10px;
bottom: 60px;
color: white;
text-transform: uppercase;
}
.wrapper {
border-radius: 0 15px 0 0;
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="wrapper">
<div class="corner-ribbon">
<span class="test-text">Some text</span>
</div>
</div>
Related
I have two elements with the same dimensions one (gray) on top of the other (yellow), but I keep getting some pixels of the bottom element showing
body{
background:#31313a
}
.bottom{
position:relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top{
position: absolute;
width: 90px;
height: 90px;
border: solid 8px #3e4148;
border-radius: 50%;
top: -8px;
left: -8px;
}
<div class='bottom'>
<div class='top'>
</div>
</div>
Can you help me make the bottom element (yellow) completely under the top element (gray)?
ps: I'm using Firefox for Ubuntu 99.0 (64-bit) and Here Is a screenshot of what I'm getting :
It just needs a bit of adjustment, use 10px for the border and -9px for the positioning.
body {
background: #31313a
}
.bottom {
position: relative;
border-radius: 50%;
width: 90px;
height: 90px;
border: solid 8px #ff9800;
}
.top {
position: absolute;
border: solid 10px #3e4148;
border-radius: 50%;
top: -9px;
bottom: -9px;
left: -9px;
right: -9px;
}
<div class='bottom'>
<div class='top'>
</div>
</div>
I am building a testimonial component in react and I have to make a shape direction towards pic, I have done the shape exactly how I want but the testimonial div has border color when I apply the div gets a border but the shape is left outside I have tried several ways but couldn't find a solution, I have attached the picture of what I want and how it is right now.
How I want it
What I have achieved till now
Below is my CSS
#page {
background-color: lightgray;
padding: 40px;
}
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
border: 1px solid #E7E7E7;
padding: 30px;
box-sizing: border-box;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div id="page">
<div class="container">This is a test</div>
</div>
You may use a filter , choice: drop-shadow.
support ? , don't be afraid : https://caniuse.com/?search=drop-shadow All but IE 6-11 and Opera mini
here is an exemple to run:
#page {
background-color: lightgray;
padding: 40px;
}
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
filter:
/* draw borders without blur*/
drop-shadow(0 1px )
drop-shadow(1px 0px )
drop-shadow(0 -1px )
drop-shadow(-1px 0px )
/* add eventually a shadow */
drop-shadow(0 0 3px )
/*and another for demo purpose */
drop-shadow(30px 30px 3px gray );
padding: 30px;
box-sizing: border-box;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div id="page">
<div class="container">This is a test</div>
</div>
You can use a :before that's 1px bigger than your :after which uses the border colour instead and then it will be mostly covered by the :after, giving you your "fake" border. Just makes sure your z-indexing is correct so it doesn't show inside your bubble.
EDIT: Adding in example css.
I modified some colours and spacing for illustrative purposes:
#page {
background: #ffc;
padding: 40px 40px 60px;
position: relative;
z-index: 0;
}
.container {
position: relative;
background: #fff;
max-width: 600px;
height: auto;
border: 1px solid #000;
padding: 30px;
box-sizing: border-box;
}
.container:after,
.container:before {
position: absolute;
width: 0;
height: 0;
top: 101%;
left: 40%;
content: "";
transform: rotate(14deg);
margin-top: -10px;
}
.container:after {
border-top: 50px solid #fff;
border-right: 40px solid transparent;
}
.container:before {
border-top: 52px solid #000;
border-right: 42px solid transparent;
margin-left: -1px;
z-index: -1;
}
<div id="page">
<div class="container">This is a test</div>
</div>
Adding both a :before and :after is a good idea to get the effect you want. Using a CSS box-shadow or outline won't work because it actually renders a complete square around your arrow/triangle shape. A z-index is added to the before to push it to the background. In that way it's not overlapping the other objects.
Here's an example of what you might want. You can adjust the border sizes to finetune it.
.container {
position: relative;
background-color: #FFFFFF;
max-width: 600px;
height: auto;
border: 1px solid #E7E7E7;
padding: 30px;
box-sizing: border-box;
}
.container:before {
position: absolute;
width: 0;
height: 0;
border-top: 53px solid #e7e7e7;
border-right: 43px solid transparent;
top: 100%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
z-index: -1;
}
.container:after {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid white;
border-right: 40px solid transparent;
top:101%;
left: 40%;
content: '';
transform: rotate(14deg);
margin-top: -10px;
}
<div class="container"></div>
Given a horizontal offset (z), I want to horizontally move variable-width div by it's midpoint to that offset, rather than it's leftmost or rightmost edge.
Since it's variable-width, I cannot simply use half of a fixed-width value to calculate an offset to get the midpoint of the div to (z)
also, the div is absolutely positioned, so it does not take the full width by default
an incorrect example is here:
http://jsbin.com/rejaduxepe/edit?html,css,output
.bar {
width: 80%;
position: absolute;
top: 0;
height: 25px;
border-radius: 2px;
border: solid 1px #F09;
}
.value {
position: absolute;
height: 19px;
line-height: 18px;
border-radius: 2px;
top: 2px;
background-color: #0F9;
border: solid 1px #F90;
color: #000;
left: 20%;
}
<div class="bar">
<div class="value">123v452</div>
</div>
I do not simply want to center the div value in the center of bar.
I want the "midpoint" of the value div to be 20% from the start of bar, but I don't know how wide the value div is.
The code above puts the "leftmost" portion of value to be 20% from the start of bar, instead of the "midpoint" of value to be 20% from the start of bar
You can use absolute positioning and translate the elements with or you can use flex on the parent element.
div{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
or
.divWrapper{
display: flex;
justify-content: center;
}
Just add transform: translateX(-50%) which will move it left by half of its width:
.bar {
width: 80%;
position: absolute;
top: 0;
height: 25px;
border-radius: 2px;
border: solid 1px #F09;
}
.value {
position: absolute;
height: 19px;
line-height: 18px;
border-radius: 2px;
top: 2px;
transform: translateX(-50%);
background-color: #0F9;
border: solid 1px #F90;
color: #000;
left: 20%;
}
span {
position: absolute;
top: 30px;
width: 20%;
border-top: 2px solid red;
}
<div class="bar">
<div class="value">123v452</div>
<span></span>
</div>
I am trying to create a div with arrow on left and right. No background, only border. Something like this:
I am able to create similar div with filled background color using ::before and ::after tags. However, only borders is something i am not able to achieve. Can it be done with css only?
https://jsfiddle.net/1g16x8p7/1/
html:
<div class="wizard">
<a class="item">
</a>
</div>
css:
.item {
display: inline-block;
padding: 15px;
padding-left: 25px;
/*default styles*/
background-color: green;
position: relative;
}
.item:before,
.item:after {
content: "";
height: 0;
width: 0;
border-width: 15px 0 15px 10px;
border-style: solid;
position: absolute;
left: 100%;
top: 0;
}
.item:before {
border-color: transparent transparent transparent white;
left: 0;
}
.item:after {
border-color: transparent transparent transparent green;
}
You can use ::before and ::after with borders on two adjacent sides (e.g. top and right) and then transform: rotate and position: absolute them to create the left and right parts, e.g.
<div class="arrow"></div>
.arrow {
height: 75px;
width: 200px;
border-top: 4px solid black;
border-bottom: 4px solid black;
position: relative;
}
.arrow::before, .arrow::after {
content: "";
border-top: 4px solid black;
border-right: 4px solid black;
height: 55px;
width: 55px;
position: absolute;
transform: rotate(45deg);
}
.arrow::before {
top: 8px;
left: -30px;
}
.arrow::after {
top: 8px;
right: -30px;
}
Here's an example.
Does anyone have any pointers on how I can achieve the following 2 effects (red color) using pure CSS?
I am not asking for entire code but if anybody can guide me in proper direction, that would really be great.
Thanks in advance.
For second effect you should create for image's container two pseudo-elements :before and :after with border-radius set to desired value. Element :before you should position to left bottom side of container and the element :after you should position to right bottom side. You should also specify widths for each pseudo-element (for example: 50% and 50%, 60% and 40% etc.).
Code for the second effect:
.image {
position: relative;
width: 350px;
}
img {
display: block;
padding: 0;
margin: 0;
}
.image:before {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 30%;
height: 120px;
position: absolute;
bottom: 0;
left: 0;
border-top-right-radius: 15px;
}
.image:after {
content: '';
display: inline-block;
background: rgba(255, 0, 0, .5);
width: 70%;
height: 120px;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 15px;
}
<div class="image">
<img src="http://placehold.it/350x350">
</div>
OK, here is a suggestion for the proper direction.
The lower red panel looks to me like two adjoining rectangles. You need to set the widths appropriately, and then for each rectangle round off one corner using border-radius: a b c d.
The effect looks to me like two of effect number 2. The red one, and then the same in white, possibly with a z-index to make sure that it (partly) covers the other one.
I trust you already know how to make the red translucent, either by using opacity or setting the colour using rgba.
I hope that helps.
You have to use the pseudo elements :after & :before to achieve the bulge in the otherwise straight div.
You may try something like this:
div {
height: 30px;
width: 200px;
background-color: red;
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
right: 0;
width: 0px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
margin: auto;
}
div:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
margin: auto;
}
<div></div>
Since you didn't provide a fiddle so use below solution as a guide. CSS will produces curved edges that you join together to produce desired results.
div.arrow-curved {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div.arrow-curved:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
For more reference for CSS shapes: https://css-tricks.com/examples/ShapesOfCSS/