css - 塑造div的 Angular 落-6ren

css - 塑造div的 Angular 落

转载作者：行者123 更新时间：2023-11-28 06:00:50

25

4

我想把 div 的边 Angular 弯成弓形!

我试过 border-radius 但它对 Angular 的形状太大了。是否有任何 css3 属性来实现结果？

这就是我现在得到的

这就是我想要的样子..

html:

 <body>
   <div class="who_we_are_bg">
   <div class="container">
   <div class="content">

<div class="who_we_are_content">
<img src="images/who-we-are.jpg" alt="LCK chemicals"/>
<div class="corner1"></div>
<div class="corner2"></div>
<div class="corner3"></div>
<div class="corner4"></div>
<h2>WHO WE WRE</h2>
<p>SRI LCK Chemical founded in 2010 has exceptional sourcing ability for chemicals used in Industrial and House keep segments. We strive to develop quality products and outstanding customer service.</p>
<p>SRI LCK Chemical founded in 2010 has exceptional sourcing ability for chemicals used in Industrial and House keep segments. We strive to develop quality products and outstanding customer service.</p>
 <a href="#">more info</a>

  </div>
 </div>
  </div>
 </div>

 </body>

CSS:

 .container{max-width:1170px;margin:0 auto;border:1px solid red;}
  .who_we_are_bg{width:100%;float:left;background:url("images/texture2.jpg")repeat 0 0;}
.who_we_are_content {float: none;margin: 0 auto;width: 90%;padding:50px 0 80px;overflow:hidden;}
.who_we_are_content img{margin:8px 40px 20px 0;padding:10px;background:#fff;position:relative;}
.corner1{position:absolute;width:50px;height:10px;  box-shadow: 0px 0px 10px black;z-index:-1;}
.who_we_are_content h2{font-family: 'OpenSans-Bold';font-size:30px;margin:10px 0 10px;}
.who_we_are_content p{padding-bottom:10px;font-family: 'OpenSansSemibold';}
.who_we_are_content a{font-family: 'OpenSansSemibold';text-decoration:none;float:left;padding:10px;background:#98b769;color:#fff;}

最佳答案

您可以在背景上使用径向渐变给人一种凹形边框的印象。例如，像这样:

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

请注意，大多数 webkit 浏览器仍然需要径向渐变的前缀，如果您想完全支持旧浏览器，您可能还需要实现旧的渐变语法。

从这里引用:https://stackoverflow.com/a/16388187/4119808

关于css - 塑造div的 Angular 落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36768158/

25

4

0

文章推荐： C++:不完整类型的无效使用

文章推荐： c++ - 不能在信号/槽/连接例程中传递参数

文章推荐： javascript - JS 生成跨度位置

node.js - 塑造 API 端点和响应
你好 Stackoverflow，我现在正在编写 API 相当长的一段时间，现在它可以与这些更大的 API 之一一起使用。开始想知道如何塑造这个 API，因为我多次在更大的平台上看到一个大实体(例如
android - 塑造 Android Material Design
我想问一下如何在android Material Design中创建改变形状的动画。这是我从 Android Material Design 指南中获得的视频。 Material can change
python - 塑造 LSTM 的数据，并将密集层的输出馈送到 LSTM
我正在尝试找出适合我想要拟合的模型的正确语法。这是一个时间序列预测问题，我想在将时间序列输入 LSTM 之前使用一些密集层来改进时间序列的表示。这是我正在使用的虚拟系列: import pandas

首页

博学

6Ren·AI

商城

css - 塑造div的 Angular 落