I have above image and i want to make this circle structure with HTML CSS.
HTML:
<div class="circle"></div>
CSS:
.circle {
width: 96px;
height: 96px;
background: #eee;
border-color: red;
border-style: solid;
border-radius: 100%;
position: relative;
}
Please help me to create inner structure of Circle like above image by using HTML CSS, Thanks in advance :)
Use this css
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%; left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
<div id="yin-yang"></div>
Related
I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.
expected design
I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?
achieved
.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
You want to hide the part of the circle that overflows the rectangle
You can do this by setting overflow: hidden; on the rectangle.
.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}
<div class="rectangle">
<div class="circle">
</div>
</div>
.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">
<div class="circle">
</div>
</div>
</div>
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I want to draw a yin-yang symbol with css in my MVC project. So I found some css, which does what I want:
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
}
<div id="yin-yang"></div>
I can easily get it to work in JSFiddle:
But as soon as I insert it in my MVC project, it draws all wrong
What can be the reason for this?
Your using bootstrap css which is including box-sizing: border-box; which is causing the distortion. You an override this by adding
box-sizing: initial;
to each of your #yin-yang styles (including the :before and :after)
It is because you are using Bootstrap Framework in your MVC or in DotnetFiddle and it has some Reset CSS as well as some basic properties like box-sizing which clearly neglects all the affected height OR width of any elements which varied due to padding and border etc(in your case your pseudo elements).
Using this CSS or can say altering your CSS you can get that to work in your environment too as:
#yin-yang {
width: 96px;
height: 96px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 46px;
height: 46px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
right: 0;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 46px;
height: 46px;
}
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>
please help to draw a pentagon means css.
I definitely need to pentagon could completely fill the text. The text should not extend beyond the pentagon (overflow:hidden).
html:
<div class="carousel_gallery" id="carousel_gallery">
укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>
</div>
css:
body{
position: relative;
}
.carousel_gallery {
width: 360px;
height: 365px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -185px;
border: 1px solid red;
overflow: hidden;
}
.carousel_gallery:before {
content: "";
width: 255px;
height: 255px;
margin-left: 52px;
margin-top: 237px;
position: absolute;
border-bottom: 1px solid red;
border-right: 1px solid red;
-webkit-transform: rotate(45deg);
background: white;
}
fiddle
customize this pentagon..hope this will help you!
<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>you text</div></div>