CSS画斜线边框

-2

我在网页设计没有太多的经验，我只是想写一个CSS 来获得了把类似于这样 CSS画斜线边框

谁能帮助我实现这种使用css的头文件

来源

2017-06-20 Pawan Kumar Prasad

你尝试过这么远吗？你在哪里编码？ https://stackoverflow.com/help/mcve – disinfor

这么多的问题已经问过同样的..请使用谷歌 – vsync

-1

下面是一个如何实现的例子。

.root { 
 
    border: 1px solid gray; 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.slash { 
 
    width: 200%; 
 
    height: 200%; 
 
    background-color: white; 
 
    border: 5px solid gray; 
 
    transform: rotate(45deg) translateY(100%); 
 
}

<div class="root"> 
 
    <div class="slash"></div> 
 
</div>

https://jsfiddle.net/0tgwa6xn/

来源

2017-06-20 18:33:19 QuestionAndAnswer

它不是通用的。 OP提供了他们试图实现的一个例子。这是一个倾斜的边界。他们是否应该包含一些代码，即迄今为止他们尝试过的代码，是的。 – hungerstar

感谢您的回复，我需要绘制类似于附加图片的内容。我对css很新，所以如果你能帮我编写css来获得像图片 –

@ user3423144那样的样式，我已经更新了我的答案，所以你可以看看其中的一个解决方案。 – QuestionAndAnswer

你试过transform: skewX() 它歪斜的对象在一定程度上。我喜欢在css中使用转换，因为我可以操纵div，我喜欢它，它需要一些时间来适应它，它如何工作，但你应该玩它，看看它是否适合你。这里是变换的更多信息：https://www.w3schools.com/cssref/css3_pr_transform.asp

，我在这里做一个例子： https://jsfiddle.net/4r3mqctp/1/

希望这有助于

来源

2017-06-20 18:52:55

CSS画斜线边框

回答

相关问题