L形div容器

Question

我试图画出以下内容＆＃34; L＆＃34;使用CSS塑造div。

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

Answer 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

Answer 2

这是另一个适合透明和非实体背景的版本。实质上，这是对当前接受的答案的增强。

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意事项：

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

Answer 3

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

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

创建的演示文件的小提示

DEMO