Home / Questions / 7241
Accepted
Christopher Tavara
Asked: 2020-04-08 10:03:59 +0800 CST 2020-04-08 10:03:59 +0800 CST

How to make a diagonally cut border style to a div?

  • 772

Hello friends, I would like you to help me, I want to style a div with a cut edge that contains a text, type google, I am trying but I can't. I leave the link for you to see. it's a google online survey: http://goo.gl/forms/7cQEZDxNAo

I attach an image. enter image description here

css

3 Answers

  1. As Carlos says in his comment , if you look at the code you can see that they achieve it using SVG with a polygon (copied from the link you share):

    .freebirdMaterialHeaderbannerSectionTriangle>polygon {
    stroke-width: 1;
}
.freebirdSolidFill {
    fill: rgb(219, 68, 55);
    stroke: rgb(219, 68, 55);
}
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10" preserveAspectRatio="none" class="freebirdMaterialHeaderbannerSectionTriangle">
  <polygon class="freebirdSolidFill" points="0,0 10,0 0,10"></polygon>
</svg>

    The image adapts to the height of the container and looks good then.

    If you want to do it exclusively with CSS and without SVG (as the question is tagged), you could do it using borders (although this solution is a bit hacky and won't always look good because it doesn't allow much configuration):

    div {
  height:30px;
  line-height:30px;
  background:red;
  display:inline-block;
  position:relative;
}

div:after {
  content:"";
  position:absolute;
  right:-30px;
  width: 0; 
  height: 0; 
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #f00;
  z-index:-1;
}
    <div>Título de la Sección</div>

    • 1
  2. Best Answer

    If you use the browser's developer tools, which you access with F12, you can inspect the html.

    This way you could analyze the use of the tags svgandpolygon

    .freebirdMaterialHeaderbannerSectionTriangleContainer {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 18px;
}


.freebirdSolidFill {
    fill: #DB4437;
    stroke: #DB4437;
}
    <div class="freebirdMaterialHeaderbannerSectionTriangleContainer">

   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10" preserveAspectRatio="none" class="freebirdMaterialHeaderbannerSectionTriangle"> 
  
        <polygon class="freebirdSolidFill" points="0,0 10,0 0,10"></polygon>
  
   </svg>
</div>

    • 0

  3. Maybe I'm too late to answer, maybe you already know how to do it, but well, I think it can be useful to someone. It goes to those who don't know and are looking for how to do it easily.

    To make a cut div like that you just need something like this:

    #DivCortado{
   border-bottom: 40px solid transparent; /*Los 40px modifican lo alto.*/
   border-left: 16px solid red; /*Los 16px modifican lo ancho del triangulo y red obviamente sera el color que tendrá.*/
}
    <div id="DivCortado"> </div>

    A normal rectangular div of all life with the text and even the divCut aside.

    • 0