L 形 div 容器答案

【问题标题】：L shaped div containerL 形 div 容器
【发布时间】：2013-12-04 04:05:10
【问题描述】：

我正在尝试使用 CSS 绘制以下“L”形 div。

如何在这个 L 形容器中绘制这种包含文本的形状？

【问题讨论】：

【解决方案1】：

像这样：

HTML：

<div class="container">
    <div class="mask"></div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS：

.container
{
    border: 3px solid black;
}

.mask
{
    border-style: solid;
    border-width: 0 0 3px 3px;
    position: relative;
    float: right;
    clear: none;
    right: -3px;
    top: -3px;
    background-color: white;
    width: 50%;
    height: 4em;
}

Demo

【讨论】：

在实践中，您可能需要 'position: relative;'在容器上也是如此。
哦，这是一个很好的解决方案，但您可能应该明确描述它的工作原理就像将原始矩形与另一个矩形重叠，创建具有所需形状的对象的错觉，尽管从 css 中很明显。例如，这种方法不会给你角落的透明度，因为它是完整的，你也应该调整背景颜色，但是会出现边框问题，也可以调整。

【解决方案2】：

这是另一个版本，它也适用于透明和非纯色背景。本质上，这是对当前接受的答案的增强。

在此方法中，形状创建如下：

仅具有底部和左侧边框的容器，因为它们是唯一覆盖容器整个高度/宽度的两个边框。
背景是通过linear-gradients 为容器的一半宽度和一半高度添加的。背景的大小等于边框的宽度，并根据需要位于左上角和右下角。
添加了一个伪元素，它浮动到右侧并根据需要定位，使其看起来像“L”形。伪元素的左侧和底部都有边框。

.container {
  box-sizing: border-box;
  position: relative;
  margin: 10px;
  border-left: 3px solid;
  border-bottom: 3px solid;
  height: 250px;
  /*height: auto;*/
  width: 400px;
  line-height: 20px;
  background: -webkit-linear-gradient(0deg, black 50%, transparent 50%), -webkit-linear-gradient(90deg, black 50%, transparent 50%);
  background: -moz-linear-gradient(90deg, black 50%, transparent 50%), -moz-linear-gradient(0deg, black 50%, transparent 50%);
  background: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, transparent 50%);
  background-size: 100% 3px, 3px 100%;
  /*background-size: 100% 3px, 3px 122%;*/
  background-position: 0px 0px, 100% 100%;
  background-repeat: no-repeat;
}
.container:before {
  position: relative;
  float: right;
  right: 0px;
  top: 0px;
  content: '';
  background: transparent;
  height: 50%;
  /*height: 80px;*/
  width: 50%;
  border-left: 3px solid;
  border-bottom: 3px solid;
}
p {
  display: block;
  padding: 8px 8px;
}

/* Just for demo */

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
  background: -moz-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

注意事项：

此方法仅在容器也是透明的情况下才有效。如果容器需要有不同的图像或渐变作为背景，那么这种方法也行不通。对于这种情况，您可以使用clip-path（可以使用 SVG 或 CSS）。然而，支持非常少。 SVG Sample | CSS Sample
示例中的盒子是固定尺寸的。如果您希望框随着内容的增加而溢出，但仍保持所讨论的形状，则在父元素和伪元素上使用 height 的注释版本。为了使渐变看起来像完美的边框，需要随着父级高度的增加动态修改大小。

【讨论】：

【解决方案3】：

您可以使用 Google web designer tool 来使用 HTML5-canvas and CSS 创建复杂的形状。

由于该文件包含大量代码，提供使用 Google Web Designer 工具

创建的演示的小提琴

DEMO

【讨论】：