时间戳

首页 > 解决方案 > 制作带边框的框，在html中划分

html - 制作带边框的框，在html中划分

问题描述

你好，我想在 html 中制作盒子，在里面我想添加倾斜的分隔线。我怎样才能做到这一点？

我想完全按照这张图片制作：https ://drive.google.com/open?id=1EBDZJNHxtQxwDctjL239hMDjiEW4w48W

我做到了这一点，但并没有像图片一样对齐。

<div class="box">
      <p style="text-align: left;"><u>प्रेषक</u><br><br>देवका अर्याल <br>लुम्बिनी पुस्तक पसल <br>बुटवल-८, रूपन्देही <br>लुम्बिनी, नेपाल&lt;/p>
      <p style="text-align: right;"><u>प्रापक</u><br><br>श्रीमान् महाप्रबन्धक <br>साझा बिक्री कक्ष <br>भृकुटी मण्डप, काठमाडौं, नेपाल&lt;/p>
  </div>

标签： htmlcss

解决方案

我希望这对你有帮助！

.box {
  background: #fff;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #000;
  width: 100%; /* The width you want. */
  padding: 1em;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.box::before {
  width: 1px;
  content: "";
  background: #000;
  position: absolute;
  top: 4px;
  left: 50%;
  bottom: 4px;
  transform: skew(45deg)
}
.box .leftSide {float:left;}
.box .rightSide {float:right;}
<div class="box">
  <div class="leftSide"><u>प्रेषक</u><br><br>देवका अर्याल <br>लुम्बिनी पुस्तक पसल <br>बुटवल-८, रूपन्देही <br>लुम्बिनी, नेपाल&lt;/div>
  <div class="rightSide"><u>प्रापक</u><br><br>श्रीमान् महाप्रबन्धक <br>साझा बिक्री कक्ष <br>भृकुटी मण्डप, काठमाडौं, नेपाल&lt;/div>
</div>

推荐阅读