What is the process for creating a beveled edge on a block div?

Question

What is the process for creating a beveled edge on a block div?

I am working on an HTML document that includes a DIV tag with specific styling:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>DIV Tag</title>
        <style type="text/css">
            .block1 { 
                width: 200px; 
                background: #ccc;
                padding: 5px;
                padding-right: 20px; 
                border: solid 1px black; 
                float: left;
            }
        </style> 
    </head>
    <body>
        <div class="block1">Text Content</div>
    </body>
</html>

How can I adjust the CSS style to achieve the desired outcome?

html css css-shapes

Answer 1

Answer №1

As we await the implementation of the border-corner-shape property in CSS4 and fear for its future, there is a workaround using CSS3 transforms to achieve similar effects while keeping the border property available for other uses:

HTML:

<div class="box">
  Text Content
</div>

CSS:

.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

Take a look at the JSBin Demo.

NOTE: Another div with the class attribute of box2 is also included in the example above, showing an alternative method that doesn't rely on CSS3 declarations you may find useful ;)

Answer 2

As we await the implementation of the border-corner-shape property in CSS4 and fear for its future, there is a workaround using CSS3 transforms to achieve similar effects while keeping the border property available for other uses:

HTML:

<div class="box">
  Text Content
</div>

CSS:

.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

Take a look at the JSBin Demo.

NOTE: Another div with the class attribute of box2 is also included in the example above, showing an alternative method that doesn't rely on CSS3 declarations you may find useful ;)

Answer 3

Answer №2

It is highly probable that this can be achieved using the invisible border technique. There are various online tools known as "triangle generators" available, such as the one found at this link

Answer 4

It is highly probable that this can be achieved using the invisible border technique. There are various online tools known as "triangle generators" available, such as the one found at this link

Answer 5

Answer №3

When I analyze a document similar to this:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>DIV Tag</title>
  <style type="text/css">
   .block1 { 
    width: 300px;
    height: 0px;
    border-style: solid;
    border-width: 200px 200px 0 0;
    border-color: #f200ff transparent transparent transparent;
   }
  </style> 
 </head>
 <body>
  <div class="block1">Text Content</div>
 </body>
</html>

I am close to achieving the desired output, but it is unclear why the text is not displaying within the defined area?

Answer 6

When I analyze a document similar to this:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>DIV Tag</title>
  <style type="text/css">
   .block1 { 
    width: 300px;
    height: 0px;
    border-style: solid;
    border-width: 200px 200px 0 0;
    border-color: #f200ff transparent transparent transparent;
   }
  </style> 
 </head>
 <body>
  <div class="block1">Text Content</div>
 </body>
</html>

I am close to achieving the desired output, but it is unclear why the text is not displaying within the defined area?

Answer 7

Answer №4

Check out the Solution.

The HTML and CSS:

ul {
  position: relative;
  overflow: hidden;
  font: 14px Arial;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 124px;
  margin-left: -120px;
  width: 0;
  border-left: 0 solid transparent;
  border-right: 230px solid transparent;
  border-top: 179px solid #CCCCCC;
}
li {
  height: 3.8em;
  line-height: 3em;
  position: relative;
  margin-left: -562px;
}
li:after,
li:before {
  content: "";
  display: block;
  height: 0.4em;
  background: #fff;
  width: 100%;
}

<ul>
  <li>Text Content</li>
</ul>

To achieve your desired output, make use of the border-width property.

I hope this explanation is helpful.

Answer 8

Check out the Solution.

The HTML and CSS:

ul {
  position: relative;
  overflow: hidden;
  font: 14px Arial;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 124px;
  margin-left: -120px;
  width: 0;
  border-left: 0 solid transparent;
  border-right: 230px solid transparent;
  border-top: 179px solid #CCCCCC;
}
li {
  height: 3.8em;
  line-height: 3em;
  position: relative;
  margin-left: -562px;
}
li:after,
li:before {
  content: "";
  display: block;
  height: 0.4em;
  background: #fff;
  width: 100%;
}

<ul>
  <li>Text Content</li>
</ul>

To achieve your desired output, make use of the border-width property.

I hope this explanation is helpful.

What is the process for creating a beveled edge on a block div?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is the button not aligned properly with the email input field?

Instructions for retrieving data from a weather API using JavaScript

How to make a line stand out in an HTML table using <td> tag: **Bold a

The background color of the HTML element is not displaying properly in Internet Explorer 8

The design problem arises from using jQuery to dynamically prepare the table body at runtime

Simple code styling tool

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

divide a JSON list

What is the best way to locate the offspring of a parent div using its data attribute?

Iterate over JSON dates in JavaScript

Is there a more efficient method for showcasing model objects in Thymeleaf rather than utilizing a form?

Is there a way to split each foreach value into distinct variables?

compress a website to display advertisement

Achieve full width with flexbox column wrap while minimizing the height

When you click, transfer a single item from one array to another and modify the text according to the items in the array

What is the best way to align background shapes within a specific section on a webpage using CSS?

Using Jquery to toggle the visibility of divs based on radio button selections

Styling may vary between the CSS used in the development environment and the one

Change background according to URL query

The <select> element is experiencing compatibility issues with the camera controls in ThreeJs