CODEWITHSUNDEEP
htmlcss
user10067540
user10067540

Reputation:

How to create a box with slanted edges?

I'm trying to make a div box with slanted edges but I just can't seem to manage it.

This is what im trying to get:

example

This with a colored (non solid) background.

Current CSS:

        .infotop {
            display: inline-block;
            min-width: 30%;
            min-height: 10%;
            max-width: 50%;
            margin: auto;
            background-color: rgba(0, 190, 190, 0.6);
            color: white;
            text-align: center;
            padding: 10px;
            padding-left: 30px;
            padding-right: 30px;
            box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
            text-shadow: 2px 2px 4px #000000;
        }

Upvotes: 3

Views: 1121

Answers (2)

G Dillon
G Dillon

Reputation: 56

You might be able to use the technique show here:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid

I applied a 180 degree rotation to the trapezoid div in the example linked above. This gave the correct shape but also flipped the div's text upside down. I was unable to flip the text right side up again. See the comments below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
    border-bottom: 100px solid blue;  /* 100px is the height of the trapezoid */
    border-left: 25px solid transparent; /* change angle by changing pixel value here*/ 
    border-right: 25px solid transparent; /* change angle by changing pixel value here*/ 
    transform: rotate(180deg); /* flip the trapezoid div */
    height: 0;
    width: 125px; /*width of the base */
}
.divtext
{
    transform: rotate(180deg); /*this is not rotating the text for some reason*/
    color: white; /* color of the text*/
}
</style>
</head>
<body>

<h2>Trapezoid CSS</h2>
<div class="trapezoid "><span class="divtext">Hello!</span></div>

</body>
</html>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272842

Use gradient to create this:

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:
   linear-gradient(blue,blue) center/calc(100% - 40px) 100% no-repeat,
   linear-gradient(to bottom left,blue 49%,transparent 50.5%) left/20px 100% no-repeat,
   linear-gradient(to bottom right,blue 49%,transparent 50.5%) right/20px 100% no-repeat;
}

body {
  background:pink;
}
<div class="box">
 some text
</div>

Here is another way with clip-path

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:blue;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}

body {
  background:pink;
}
<div class="box">
 some text
</div>

Upvotes: 3

Related Questions