草庐IT

html - 只用 CSS 创建一个三 Angular 形

coder 2023-08-10 原文

我正在开发响应式 Web 应用程序，需要创建 2 个独立的内容区域，如下所示，

到目前为止，我尝试过，

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;

但是，不幸的是无法创建三 Angular 形。

除了使用 border 属性之外，是否有任何其他方法可以使用 CSS 创建三 Angular 形，并且可以将内容完全包裹在 div 中？

如有任何帮助，我们将不胜感激。

最佳答案

我相信您正在寻找带边框和中间透明切口的三 Angular 形(现有答案似乎都没有解决)，所以这里有一个例子。这绝对有可能实现，但需要大量的黑客攻击。

使用 CSS 转换:

下面的代码片段使用伪元素和变换来产生三 Angular 形效果。输出是响应式的，但是倾斜变换的使用意味着如果容器的形状变成矩形，那么倾斜 Angular 将需要修改，并且需要对定位属性等进行更多调整。

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 200px;
}
.div-1,
.div-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.div-1 {
  top: calc(-100% - 5px);
  transform: skewY(45deg);
  transform-origin: left top;
  border-bottom: 2px solid;
}
.div-1:after {
  position: absolute;
  content: '';
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  top: calc(100% + 7px);
  left: 0px;
  transform: skewY(-45deg);
  transform-origin: left top;
  border: 1px solid;
}
.div-2 {
  top: 5px;
  transform: skewY(45deg);
  transform-origin: left bottom;
  border-top: 1px solid;
}
.div-2:after {
  position: absolute;
  content: '';
  height: calc(100% - 7px);
  width: calc(100% - 7px);
  top: 0px;
  left: 0px;
  transform: skewY(-45deg);
  transform-origin: left bottom;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}

/* just for demo */
.container{
  transition: all 1s;
}
.container:hover{
  width: 400px;
  height: 400px;
}
body{
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <div class='div-1'></div>
  <div class='div-2'></div>
</div>

使用渐变:

另一种方法是使用几个线性渐变作为背景图像，如下面的代码片段所示。但是这里也有很多缺点。 (1) 目前浏览器对渐变的支持很差。 (2) Angular 渐变往往会产生需要平滑的锯齿状线条。 (3) 您在相关图片中特别提到了 2 个 div 元素，我认为您需要其中的内容，在这种情况下，这将需要额外的工作。

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 300px;
  background: linear-gradient(to top right, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(to bottom left, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)) ;
    }
.container:before{
  position: absolute;
  content: '';
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  left: 4px;
  border-top: 2px solid black;
  border-right: 2px solid black;
}
.container:after{
  position: absolute;
  content: '';
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  top: 4px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
/* just for demo */
.container{
  transition: all 1s;
}
.container:hover{
  width: 700px;
  height: 400px;
}
body{
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
</div>

使用 SVG:

所有这些都让我想到了我的建议，即使用 SVG 来创建这样的形状。它们仅使用 path 元素即可轻松创建，易于维护，并且本质上是响应式的。

.container {
  position: relative;
  height: 300px;
  width: 200px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
svg path {
  fill: transparent;
  stroke: black;
}
/* just for demo */

.container {
  transition: all 1s;
}
.container:hover {
  height: 400px;
  width: 700px;
}
body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M4,2 L98,2 98,96 4,2z M2,4 L2,98 96,98 2,4z' vector-effect='non-scaling-stroke' />
  </svg>
</div>

Note: With any of the approaches mentioned above (or those given in other answers), you cannot make the content to remain within the boundaries of those triangles. Text can be placed upon them but the text cannot be contained within those boundaries unless the CSS Shapes module's shape-inside property is fully implemented.

关于html - 只用 CSS 创建一个三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34563184/

Angularhtmlsectionpxcodecsssvgcss-shapes

有关html - 只用 CSS 创建一个三 Angular 形的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  6. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  7. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  8. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  9. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  10. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

随机推荐