创造有对角线边缘的箱子 [英] Create Box With Diagonal Edge

问题描述

我需要创建一个带有对角线边框的框。以下是图片，，那么可能是黄色div上的相对位置，然后是绝对位置的内容？

解决方案

有一种方法来实现这种形状，而不必使用额外的元素。我可以理解使用多个图片的不情愿，但这种方法只使用多个背景，不应该对网页加载时间有任何影响。

在这种方法中，我们创建a 线性渐变背景的较小尺寸并定位在右上角的容器中以实现三角效果。

这种方法也可以用于媒体查询，而没有太多问题。

  .shape {height：400px; width：50vw;背景：线性梯度（225deg，＃F3D56A 50％，透明50％），#EFEFEF; background-size：75px 75px;背景重复：无重复; background-position：right top; border-radius：4px; box-shadow：4px 4px 4px rgba（0，0，0，.5）; border-top：5px＃F3D56A solid;} @ media（max-width：300px）{.shape {width：150px; background-size：50px 50px; }} @ media（min-width：301px）and（max-width：600px）{.shape {width：300px; background-size：50px 50px; }}  

 < div class =shape> < / div>  

I need to create a box with a diagonal edge. Below is the picture and here is a link to it.

How would I do this using only CSS and HTML?

I'm aware its possible to create triangles in CSS, so maybe I create one div with the rounded corners for the 'yellow' portion of the box. Not sure how to do the inside grey part though.

I'd like to avoid the multiple images solution because this will be on mobile so that it loads as quickly as possible.

I'm looking into a solution with 3 divs inside and one being a triangle, I found a triangle maker here, then maybe relative position on the yellow div, and absolute position the content after that?

解决方案

There is a way to achieve this shape without having to use extra elements also. I can understand the reluctance in using multiple images but this approach only makes use of multiple backgrounds and should not have any impact on page load time.

In this approach, we create a linear-gradient background of a smaller size and position it at the right top of the container to achieve the triangle effect.

This approach can also be used with media queries without much issues.

.shape {
  height: 400px;
  width: 50vw;
  background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  background-position: right top;
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, .5);
  border-top: 5px #F3D56A solid;
}
@media (max-width: 300px) {
  .shape {
    width: 150px;
    background-size: 50px 50px;
  }
}
@media (min-width: 301px) and (max-width: 600px) {
  .shape {
    width: 300px;
    background-size: 50px 50px;
  }
}

<div class="shape"></div>

这篇关于创造有对角线边缘的箱子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！