几何形状的阴影

Question

Denis

Asked:2023-05-19 00:49:27 +0000 UTC2023-05-19 00:49:27 +0000 UTC 2023-05-19 00:49:27 +0000 UTC

如何从某些侧面的块中删除边框？

772

怎么去掉一些地方的边框？在四舍五入的地方，边界有所不同：

我们还需要扩展第一个元素的上边框：

.company-items {
  margin: 0 100px;
}

.company-items-container {}

.company-item {
  border-radius: 15px;
  border: 1px solid #C4D0D9;
}

.company-item:nth-child(odd) {
  border-radius: 10px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #C4D0D9;
  border-right: 0;
}

.company-item:nth-child(even) {
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 1px solid #C4D0D9;
  border-left: 0;
}

.company-item-container {
  display: flex;
}

.company-subtitle {
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-family: 'Sreda';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #FFFFFF;
}

.company-icon {
  display: none;
}

.company-text {
  width: 420px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #FFFFFF;
}

.company-text,
.company-subtitle {
  margin: 115px 150px;
}

<div class="company-items">
  <div class="company-items-container">
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>

  </div>
</div>

2 个回答

Voted

UModeL · Answer 1 · 2023-05-19T03:19:14Z

向块中添加伪元素。我们检查块的奇偶性，并在此基础上为伪元素设置不同的样式。按照同样的原则，我们在该部分的开头和结尾添加行（不要忘记body {overflow: hidden auto;}这样就不会出现水平滚动条）。

为::after添加了一些额外的规则，以防块的数量事先未知或可以更改 - 然后最后一行将自动占据所需的位置。

body {
  overflow: hidden auto;
  background-color: #3b3b3d;
}

.company-items { margin: 0 100px; }

.company-items-container {}

.company-item {
  position: relative;
  border-top: 1px solid #90989e;
}
/* Закругления блоков */
.company-item::before {
  content: '';
  position: absolute;
  top: -1px;
  display: block;
  height: 100%;
  width: 10px;
  border: 1px solid #90989e;
}
.company-item:nth-child(odd)::before {
  right: 100%; border-right: none;
  border-radius: 10px 0 0 10px;
}
.company-item:nth-child(even)::before {
  left: 100%; border-left: none;
  border-radius: 0 10px 10px 0;
}
/* Концы блоков */
.company-item::after {
  content: '';
  position: absolute;
  display: block;
  height: 0;
  border-top: 1px solid #90989e;
}
.company-item:first-child::after {
  top: -1px; left: 100%; width: 100vw;
}
.company-item:nth-child(odd):last-child::after {
  top: 100%; left: 0; width: 100vw;
}
.company-item:nth-child(even):last-child::after {
  top: 100%; right: 0; width: 100vw;
}

.company-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
.company-item:nth-child(even) .company-item-container {
  flex-direction: row-reverse;
}

.company-subtitle {
  display: grid;
  place-items: center;
  font: normal 400 36px/1em "Sreda";
  color: #fff;
}

.company-icon { display: none; }

.company-text {
  width: 420px;
  font: normal 400 18px/1.5em "Poppins";
  color: #fff;
}

<div class="company-items">
  <div class="company-items-container">
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Dynamic Management</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Development Modeling</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
  </div>
</div>

Qwertiy · Answer 2 · 2023-05-19T04:50:37Z

可以简单的clip-path把多余的部分剪掉（原则上可以剪的更准确，但是如果需要背景的话，就更容易去掉::before）：

main {
  width: 70%;
  margin: 2em auto 4em;
}

#bg:checked ~ main section {
  background: antiquewhite;
}

section {
  --r: 1em;

  border: 1px solid blue;
  min-height: 3em;
  border-radius: var(--r);
  padding: 0 var(--r);
  
  --rtc: 0em;
  --rbc: 0em;
  --ltc: 0em;
  --lbc: 0em;

  clip-path: polygon(
    var(--ltc) 0,
    calc(100% - var(--rtc)) 0,
    calc(100% - var(--rbc)) 100%,
    var(--lbc) 100%
  );
}

section + section {
  margin-top: -1px;
}

section:nth-child(odd) {
  border-color: blue transparent blue blue;
  --rtc: var(--r);
  --rbc: var(--r);
}

section:nth-child(even) {
  border-color: blue blue blue transparent;
  --ltc: var(--r);
  --lbc: var(--r);
}

section:first-child {
  border-top-right-radius: 0;
  --rtc: 0em;
}

section:nth-child(odd):last-child {
  border-bottom-right-radius: 0;
  --rbc: 0em;
}

section:nth-child(even):last-child {
  border-bottom-left-radius: 0;
  --lbc: 0em;
}

<input type=checkbox id=bg><label for=bg>Показать обрезку</label>

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

<main>
  <section></section>
</main>

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

如何从某些侧面的块中删除边框？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何从某些侧面的块中删除边框？

2 个回答

相关问题