像这样的网站可以用完整的 html 和 css 设计吗？ [关闭]答案

【问题标题】：Can a site like this be designed in full html and css? [closed]像这样的网站可以用完整的 html 和 css 设计吗？ [关闭]
【发布时间】：2019-05-10 17:08:46
【问题描述】：

目前显示的是用 html 和图像设计的。只是想知道它是否可以在我开始包括它分裂和转动的中心部分之前完成。不必响应，但只是全宽。我不想开始然后被卡在中间它分裂的地方

【问题讨论】：

为了让我们帮助您，您至少需要尝试这样做。目前尚不清楚您要做什么。
我想问的是，可以用完整的 html 和 css 代码创建这样的网站布局吗？我在 50% 的 html 和 50% 的图像中做了一个。只是想知道它是否可以用 100% 代码完成
如果您在谈论“切角”，您可以使用常规 css“border-radius”属性非常接近。虽然这给了你一个圆角，但它是最简单、最直接的方式，无需借助 javascript 或 SVG 或其他绘图练习。
简短的回答是肯定的。如果您希望它完全使用 CSS，您可以使用 :before 和 :after 伪元素和绝对定位来“伪造”边框角。

标签： html css image

【解决方案1】：

是的，这可以通过多种方式实现：这是我在 Codepen 上创建的一种方式

这是 HTML 和 CSS：

.container {
  display: flex;
}

.block {
  width: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-top: 100px;
  padding: 15px;
  position: relative;
  min-height: 400px;
}

.block img {
  position: absolute;
  top: -65px;
}

.left {
  background: yellow;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.left img {
  right: 15px;
}

.right {
  background: red;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

h1 {
  text-align: center;
}

<h1>My Site</h1>
<div class="container">
  <div class="block left">
    <img src="https://via.placeholder.com/350x200" alt="">
  </div>
  <div class="block right">
    <img src="https://via.placeholder.com/350x200" alt="">
  </div>
</div>

【讨论】：