时间戳

首页 > 解决方案 > 使用垂直和水平溢出隐藏文本创建对角线分隔的 div

html - 使用垂直和水平溢出隐藏文本创建对角线分隔的 div

问题描述

我有一个问题要问所有的 CSS 大师。我想创建一个带有背景图像的 div。div 用对角线分隔，文本内容如下图所示。

我已经为这个小项目构建了后端。目标是创建一个后端，在用户选择两页后从小说中提供随机句子 - 然后创建“数字狗”。可悲的是，我对 CSS 不是很熟练，所以我在使用更高级的 CSS 时遇到了困难。我希望这里有人可以把他的知识借给我。

提前致谢！

标签： htmlcss

解决方案

这是一个使用一个元素的简单想法：

.box {
  width: 250px;
  height: 250px;
  padding: 40px;
  text-align: justify;
  box-sizing: border-box;
  border: 1px solid;
  position: relative;
  background: gold;
  color: #fff;
  overflow:hidden;
}

.box::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 40px;
  transform: rotate(90deg);
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 5px;
  background: red;
  transform: skewX(-45deg);
  transform-origin: bottom;
}
<div class="box" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod pharetra mi id auctor. Ut sagittis tortor venenatis fermentum auctor. Curabitur dictum tristique tincidunt. ">
Phasellus rutrum odio a magna auctor facilisis. Mauris vehicula tortor non nibh volutpat, non aliquam libero convallis. Quisque dignissim feugiat efficitur.
</div>

推荐阅读