I am trying to design a octagon with texts stuffed inside. But somehow the text is not showing. Please help!
HTML
<div class = "octagon">This is some text</div>
CSS
.octagon
{
width: 134px;
height: 100px;
background: #40174F;
position: relative;
color:white;
}
.octagon::before
{
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 25px solid #40174F;
border-left: 25px solid #fff;
border-right: 25px solid #fff;
width: 84px;
height: 0;
color:white;
}
.octagon::after
{
content: "";
position: absolute;
bottom: 0;
left: 0; border-top: 25px solid #40174F; border-left: 25px solid #fff; border-right: 25px solid #fff; width: 84px; height: 0;
color:white;
}
The text inside the div is not showing.
Add line-height and text-align in .octagon class
.octagon {
width: 134px;
height: 100px;
background: #40174F;
position: relative;
color: white;
line-height: 6;
text-align: center;
}
Related
can you help me to make like this div:
My Code:
body{
display: flex;
justify-content: center;
}
#talkbubble {
width: 160px;
height: 80px;
background: #bc0a14;
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 #bc0a14;
border-bottom: 13px solid transparent;
}
#talkbubble:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 26px solid #bc0a14;
border-bottom: 13px solid transparent;
}
<div id="talkbubble"></div>
I want to create this div with the same style in the image
here is an idea with pseudo element and radial-gradient. I used CSS variable to easily adjust the shape but it's not mandatory
.box {
width: 100px;
height: 50px;
margin:0 var(--w,20px);
display:inline-block;
border-radius: 15px;
background: var(--c,red);
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--w,20px);
right:calc(100% - 2px);
background:
radial-gradient(107% 100% at top left,transparent 96%,var(--c,red) 100%) top,
radial-gradient(107% 100% at bottom left,transparent 96%,var(--c,red) 100%) bottom;
background-size:100% 50.1%;
background-repeat:no-repeat;
}
.box:after {
left:calc(100% - 2px);
right:auto;
transform:scaleX(-1);
}
<div class="box"></div>
<div class="box" style="--c:blue;--w:30px;"></div>
<div class="box" style="--c:purple;--w:10px;height:60px"></div>
please try this code:
body{
display: flex;
justify-content: center;
}
#talkbubble {
width: 180px;
height: 54px;
background: #bc0a14;
position: relative;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 24px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 99%;
top: 17px;
width: 0px;
height: 1px;
border-top: 9px solid transparent;
border-right: 10px solid #bc0a14;
border-bottom: 9px solid transparent;
}
#talkbubble:after {
content: "";
position: absolute;
left: 99%;
top: 17px;
width: 0;
height: 1px;
border-top: 9px solid transparent;
border-left: 10px solid #bc0a14;
border-bottom: 9px solid transparent;
}
<div id="talkbubble"></div>
HTML:
<div class="rectangle">Some text</div>
CSS:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
}
Is there any way to make div looks like in the photo?
You can use ::after and ::before to achieve the result.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
}
/* for the triangular shape */
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
z-index:1000;
}
/* for hiding the portion except the border
of the triangle shape */
.rectangle::before {
content: "";
position: absolute;
right:-40px;
bottom: 0;
top:0;
width: 0;
height: 0;
border-left: 40px solid white;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
z-index:1001;
}
<div class="rectangle">Some text</div>
In case you don't need border like structure then you can avoid ::before portion and set background color to main div.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
background:red;
}
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
<div class="rectangle">Some text</div>
For more shapes refer : CSS Tricks
To keep only the border without filling the div, You can try using ::before and ::after.
Something like this:
.rectangle {
width: 200px;
height: 40px;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.rectangle::after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 2px;
border-top: 18px solid transparent;
border-left: 10px solid #fff;
border-bottom: 17px solid transparent;
}
.rectangle::before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -2px;
height: 0;
border-top: 22px solid transparent;
border-left: 14px solid red;
border-bottom: 22px solid transparent;
}
<div class="rectangle">Some text</div>
Consider rotating a pseudo-element by declaring a transform: rotate() property value, as demonstrated in the code snippet embedded below.
As an alternative to achieving the same behaviour declaring border property rules, this method allows borders to be declared on the element in an intuitive manner using only one pseudo-element.
Rotating an element in this way also gives you the option to fill in the element with a solid colour - allowing you more freedom in customization.
Code Snippet Demonstration:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
/* additional */
border-right: 0;
box-sizing: border-box;
position: relative; /* required */
}
/* Additional */
.rectangle:after {
content: "";
position: absolute;
width: 55px;
height: 55px;
border-right: 5px solid red;
border-top: 5px solid red;
box-sizing: inherit;
right: -28px;
top: 7px;
transform: rotate(45deg);
}
<div class="rectangle">Some text</div>
Check CSS Shapes
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
<div id="pointer">
</div>
you have to use the pseudo class after
.rectangle {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:red;
text-align:center;
line-height:40px;
}
.rectangle:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid red;
border-bottom:20px solid transparent;
}
<div class="rectangle">Some text</div>
You can do it using :before and :after
.rectangle {
width: 300px;
height: 80px;
border: 5px solid blue;
border-right: none;
position: relative;
}
.rectangle::before {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
bottom: 16px;
transform: rotate(-21deg);
}
.rectangle::after {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
top: 16px;
transform: rotate(21deg);
}
<div class="rectangle">Some text</div>
.square {
border: 2px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
font-weight: 600;
padding: 0 6px;
position: relative;
}
.square:before {
border-left: 10px solid transparent;
border-right: 0 solid transparent;
border-top: 10px solid #000;
bottom: -10px;
content: '';
display: block;
height: 0;
position: absolute;
transition: all 0.25s linear 0s;
right: 0;
width: 0;
}
<div class="square">
0
</div>
In the shown image i want to achieve the border around the zero using css only.
I tried this but i want hollow arrow so help me out.
I tried speech bubble but in my case background is dynamic and I need the the cutting part of bubble to be transparent
Try This:
.parent {
display: inline-block;
background-color: #339FFF;
padding: 15px;
}
.child {
background-color: transparent;
width: 30px;
height: 30px;
position: relative;
border:3px solid #FFF;
text-align: center;
color: #FFF;
line-height: 30px;
}
.child:before{
content: '';
border-top: 5px solid #339FFF;
border-left: 5px solid #FFF;
width: 0;
height: 0;
position: absolute;
bottom: -5px;
right: 0px;
z-index: 1;
}
.child:after {
content: '';
border-top: 10px solid #fff;
border-left: 10px solid #339FFF;
width: 0;
height: 0;
position: absolute;
bottom: -13px;
right: -3px;
}
<div class="parent">
<div class="mask">
<div class="child">0</div>
</div>
</div>
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
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>