This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 1 year ago.
Trying to replicate this design using css. The quotes are pngs. But can only find help for solid rectangles and more of a page corner folded to save a spot.Design I'm trying to replicate with Css
I gave them different colors so you could visualize what's happening easily.
.myDiv {
margin-top: 30px;
position: relative;
width: 50px;
height: 50px;
background-color: transparent;
border: 10px solid red;
border-radius: 0 0 15px 15px;
border-top: none;
}
.myDiv::before {
content: '';
position: absolute;
height: 20px;
width: 40px;
background-color: orange;
top:-10px;
left:20px;
border-radius: 0 10px 0 0;
}
Related
This question already has answers here:
How to make round corners to both inside of a box and its border?
(12 answers)
Closed 10 months ago.
I am trying to make this border
black border: 2px
white border: 1 px with border radius 4 px
Issue - I have tried using pseudo elements but not able to fill corners, its looking like this image below
what i have achieved with pseudo elements
Can i have the css to get this desired border?
Might be wrong, but I think the the black one is not a border indeed; just a div:
body {
background-color: red;
}
#black-border {
background-color: black;
width: 250px;
height: 150px;
padding: 10px 15px;
}
#white-border {
border: 8px solid white;
background-color: white;
border-radius: 15px;
height: 132px;
}
#inner-red {
background-color: red;
width: 100%;
height: 100%;
border-radius: 5px;
}
<div id="black-border">
<div id="white-border">
<div id="inner-red"></div>
</div>
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 11 months ago.
I'm trying to make this shape in HTML/CSS, and I can't do it for the life of me. If anyone can give a heads-up, it would be much appreciated. Including JS also doesn't matter. If you can give the smallest nudge in the right direction, I would be grateful. Thanks, here's the drawing.
Please check this code
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble: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;
}
<div class="shape">
<h2>Talk Bubble</h2>
<div id="talkbubble"></div>
</div>
This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 1 year ago.
I am trying to create image icons that have a status dot which emulates Slack member-icons (left).
How can I use CSS to add a transparent ring around the dot?
.memberIconRow {
display: flex;
.memberIconArea {
position: relative;
img {
width: 30px;
margin: 0 6px 0 0;
border-radius: 5px;
}
.statusDot {
background: #f00;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 21px;
left: 23px;
}
}
}
Some dirty trick what I think of is add border to your dot with the same background as your photo, in this case - a light yellow.
Like this -
.statusDot {
...
border:4px solid yellow; /* same color as you profile photo background */
}
In multiple background colours case, use css var() like;
:root {
--blue: #1e90ff;
}
.member-bg {
background-color: var(--blue);
}
. statusDot {
border: 4px solid var(--blue);
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Im looking to replicate something like this but as a relatively new guy to CSS, I cannot for the life of me figure out the appropriate CSS to create this shape around the text.
image example
Really appreciate any help you can give. Thanks in advance!
There are multiple ways to do this. But you can split it in 2 separate shapes.
Rectangular shape ( background of the text ) and a triangle using a pseudo element.
See below
Tweak around with the border values of the after element to achieve exactly the shape you want.
span {
position:relative;
color: white;
background: blue;
padding: 10px 0 10px 10px;
margin-top: 10px;
display: inline-block;
}
span:after {
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 20px solid blue;
position: absolute;
right: 0;
transform: translateX(100%);
content: '';
top: 0;
}
<span>
My Text
</span>
There you go
Note that you can play around with the border-left value in #snippet:after to increase or reduce the "arrow section"
#snippet {
width: 200px;
height: 150px;
background-color: red;
position: relative;
}
#snippet:after {
content: '';
position: absolute;
top: 0px;
left: 200px;
border: 75px solid transparent;
border-left: 30px solid red;
}
<div id="snippet">Hello</div>
This question already has answers here:
CSS Only Pie Chart - How to add spacing/padding between slices?
(2 answers)
HTML5 / CSS3 Circle with Partial Border
(8 answers)
Closed 2 years ago.
I'm trying to create this image: https://i.stack.imgur.com/7k4Uq.png
I'm not sure what the best way to do this is. I got the CSS to work, but I don't know if there is a "better way" of doing it, or a cleaner/easier method. My CSS is below:
:root{
--size-red: 70px;
--size-grey: 43px;
}
.arc {
width: 0;
height: 0;
position: relative;
border-left: var(--size-red) solid transparent;
border-right: var(--size-red) solid transparent;
border-top: 100px solid red;
border-radius: 51%;
}
.arc:after {
content:'';
width: 0;
height: 0;
position: relative;
right: var(--size-grey);
border-left: var(--size-grey) solid transparent;
border-right: var(--size-grey) solid transparent;
border-top: 60px solid white;
border-radius: 51%;
}
Any suggestions for how to make my code look cleaner/more manageable would be appreciative. Thanks!