This question already has answers here:
Ribbon and stars - How to get this done without an image file?
(1 answer)
How to create a ribbon shape in CSS
(8 answers)
Triangle shadow on CSS ribbon
(2 answers)
Closed 1 year ago.
I'm trying to get inverted sides on my banner as shown in the attached screenshots. I have a rectangle at the moment and would like corners like in the 2nd picture.
This is the current code:
.shop-sale-banner {
background-color: #00509D;
position: relative;
margin: auto;
width: 50%;
}
Thanks!
you can create pseudo-element with borders that looks like desired shape
.shop-sale-banner {
position: relative;
margin: auto;
width: 50%;
text-align: center;
color: #fff;
height: 2em;
line-height: 2em;
}
.shop-sale-banner:before{
content:"";
position: absolute;
top: 0;
z-index: -1;
left: 0;
right: 0;
border-style: solid;
border-width: 1em 0.4em 1em 0.4em;
border-color: #00509D transparent #00509D transparent;
height: 0;
}
<div class="shop-sale-banner">Shop Sale</div>
Try this code here:
body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
.container {
display: flex;
justify-content: center;
margin-top: 40px;
}
.banner {
background-color: blue;
color: white;
width: 600px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.banner span {
font-size: 2rem;
}
.left-triangle {
width: 0px;
height: 0px;
border: 30px solid blue;
border-left: 20px solid white;
transform: translateX(20px);
}
.right-triangle {
width: 0px;
height: 0px;
border: 30px solid blue;
border-right: 20px solid white;
transform: translateX(-20px);
}
<html>
<body>
<div class="container">
<div class="left-triangle"></div>
<div class="banner">
<span>Shop Sales</span>
</div>
<div class="right-triangle"></div>
</div>
</body>
</html>
The trick to get your triangles is to create divs with zero width and height, but with borders.
Related
There are 3 borders (green,white, internal border black I suggest) and each one with its color and border-radius.
I don't know if I should create 3 divs and to each one put the border properties and if on the contrary everything can be done in the same div.
basically I have this design:
https://i.stack.imgur.com/Hxv8J.png
I would like to know the best way to do it, thank you very much.
this is my idea:
*{
box-sizing:border-box;
}
.border1{
width:400px;
height:300px;
border:20px solid green;
border-radius: 20px;
}
.border2{
border:15px solid white;
width:100%;
height:100%;
border-radius: 10px;
}
.content{
background:black;
display: flex;
justify-content: center;
align-items: center;
width:100%;
height:100%;
border-radius: 10px;
color:white;
}
<div class="border1">
<div class="border2">
<div class="content">
<span>Growth</span>
</div>
</div>
</div>
As the borders are purely decorative you could use pseudo before and after elements to produce the white and green rather than put extra elements into the actual HTML.
This snippet sets the width of the green and while borders and the distance between the whole thing and the edge of the viewport as CSS variables and uses CSS calc function to place a white before pseudo element and a green after pseudo element behind the black one. That way you can get 3 different radii as required.
Obviously you will want to change the radii in this code to suit your particular need.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background: black;
}
.borders {
--greenW: 30px;
--whiteW: 10px;
--edge: 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - (2 * (var(--greenW) + var(--whiteW) + var(--edge))));
height: calc(100% - (2 * (var(--greenW) + var(--whiteW) + var(--edge))));
border-radius: 10px;
color: white;
font-size: 10vw;
font-family: sans-serif;
font-weight: bold;
position: relative;
left: calc(var(--whiteW) + var(--greenW) + var(--edge));
top: calc(var(--whiteW) + var(--greenW) + var(--edge));
}
.borders::before {
content: '';
display: inline-block;
width: calc(100% + (2 * var(--whiteW)));
height: calc(100% + (2 * var(--whiteW)));
background-color: white;
border-radius: 10px;
position: absolute;
top: calc(-1 * var(--whiteW));
left: calc(-1 * var(--whiteW));
z-index: -1;
}
.borders::after {
content: '';
display: inline-block;
width: calc(100% + (2 * (var(--whiteW) + var(--greenW))));
height: calc(100% + (2 * (var(--whiteW) + var(--greenW))));
background-color: green;
position: absolute;
top: calc(-1 * (var(--whiteW) + var(--greenW)));
left: calc(-1 * (var(--whiteW) + var(--greenW)));
border-radius: 40px;
z-index: -2;
}
<body>
<div class="borders">Growth</div>
</body>
</html>
Basically you've have to use Multiple Boxes and Containers to achieve this.
Use the following Snippet to understand it better.
body {
padding: 20px;
}
.module {
width: 200px;
height: 200px;
background: #555;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.module:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: red;
z-index: -1;
}
<div class="module">
</div>
You can't do that with only border. I used box-shadow and border for this.
body {
background:#dadada;
}
#bordered {
height: 200px;
width: 200px;
border: 10px solid white;
box-shadow: 0px 0px 0px 10px #00ff1c , inset 0px 0px 0px 10px black;
border-radius: 4px;
}
<div id="bordered"></div>
How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
I have some divs inside a main div, but I have looked every questions similar to this and I have tried many things but I couldn't center them horizontally. I could only make them on the other side but not the center.
.ground {
width: 390px;
height: 575px;
border: 1px solid white;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
Here is the jsfiddle demo
You can see those 5 circles are the ones I need to center them inside the main div ground.
In your case, the simplest way to do this would be to set the display of the .line element to inline-block so that it has a "shrink-to-fit" width. In doing so, it will have the same width as its children elements. Then add text-align: center to the parent element to center the inline child element:
Updated Example
.ground {
text-align: center;
}
.ground .line {
display: inline-block;
}
See this answer for a few alternatives.
You can make use of flexbox centering. display: flex and justify-content: center on the parent element will center the circles.
JSfiddle Demo
.ground {
width: 390px;
height: 575px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
border: 1px solid white;
display: flex;
justify-content: center;
}
.line {
padding: 10px
}
.active {
width: 30px;
height: 30px;
opacity: 0.5;
background: gray;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
.nonactive {
width: 30px;
height: 30px;
opacity: 1.0;
background: lime;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 100px;
display: inline-block;
border: 2px solid black;
}
<div class="ground">
<div class="line">
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
<div id="def" class="active"></div>
</div>
</div>
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
As per screenshot, how if the line become transparent when reach the center of wording part? can we use css gradient to achieve it?
h2.section-title {
font-size: 34px;
font-weight: 400;
text-transform: uppercase;
}
.section-divider h2 {
display: inline-block;
padding: 1rem;
position: relative;
top: -5rem;
background-color: transparent;
}
.section-divider {
border-top: 1px solid #fff;
margin-top: 4rem;
margin-bottom: 0;
text-align: center;
}
<div class="section-divider">
<h2 class="text-center section-title" lang="en">Highlights</h2>
</div>
Well, this is not my answer. I'm just adding code snippet of solution given by #Sachin in comment section of question.
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>