Как делать стиль края, отрезанный по диагонали в div?

Привет друзья я хотел бы, чтобы они помогли мне, я хочу дать стиль div с обрезанным краем, который содержит текст, тип google, пробую, но не могу. Я оставляю им соединение для того, чтобы они видели. это онлайн опрос google: http://goo.gl/forms/7cQEZDxNAo

Я присоединяю изображение. introducir la descripción de la imagen aquí

1
задан 07.04.2016, 21:11
2 ответа

Если ты используешь developer tools browser, на который ты соглашаешься с F12, ты можешь инспектировать html.

Из этой формы ты смог бы проанализируй использование tag svg и polygon

.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
ответ дан 24.11.2019, 14:37
  • 1
    Большое спасибо уважаемый Леандро, уже logr и # 233; решать это. – Christopher Tavara 07.04.2016, 21:24

Как говорит Карлос в Вашем комментарии, смотришь ли ты код ты сможешь видеть, что они это получают используя SVG с polygon (скопированный ссылки, которую ты имеешь):

.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>

Изображение приспосабливается на уровне контейнера и и видит хорошо тогда.

Если ты хочешь сделать это исключительно с CSS и без SVG (как приклеили этикетку на вопрос), ты мог бы делать это используя края (хотя это решение - немного hacky и не всегда будут видеть хорошо, потому что он не позволяет много конфигурации):

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
ответ дан 24.11.2019, 14:37
  • 1
    Большое спасибо Альваро, я sirvi и # 243;. – Christopher Tavara 07.04.2016, 21:24