斜线

使用SVG在下面给出了绘制Incliented行的代码。

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

输出

请参阅More explanations and tutorial on SVG

外部矩形

用于绘制外部矩形使用SVG路径

Answer 2

你想要的就是这里，

选项通过html和css：

HTML和css：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>-Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
<style>
.cust-well{
  border: 1px solid #ccc;
  border-radius: 0;
  float: left;
  min-height: 350px;
  width: 100%;
  position:relative;
}
.first-text {
  float: left;
  font-weight: 700;
}
.second-text {
  bottom: 37px;
  position: absolute;
  right: 50px;
}
.lt-line {
  border-top: 2px solid #000;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}
.lt-line2 {
  border-top: 2px solid #000;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 40%;
}
.lt-line3 {
  border-top: 2px solid #000;
  right: 0;
  position: absolute;
  bottom: 0;
  width: 50%;
}
.lt-line4 {
  border-top: 2px solid #000;
  right: 0;
  position: absolute;
  top: 0;
  width: 40%;
}
.cust-well {
  border-color:white #000 white;
  border-style:none solid;
  border-width:2px;
  float: left;
  min-height: 350px;
  position: relative;
  width: 100%;
}
.cust-well::after {
  border: 1px solid #000;
  content: "";
  height: 390px;
  left: 50%;
  position: absolute;
  top: -20px;
  transform: rotate(9deg);
}
</style>
</head>
<body>
<div class="container-fluid" style="margin-top:200px;">
    <div class="container">
        <div class="col-sm-6 col-sm-offset-3">
            <div class="well cust-well">
                <span class="lt-line"></span>
                <span class="lt-line2"></span>
                <span class="lt-line3"></span>
                <span class="lt-line4"></span>
                <div class="first-text">
                    <h2>Hello</h2>
                </div>
                <div class="second-text">
                    <h2>Hi</h2>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

希望这会对你有帮助!!!

Answer 3

谢谢大家，我想出了一个解决方案，请查看。

<!DOCTYPE html>
<html>
<body>

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1280 720">

  <polyline points="708,30 30,30 30,660 462,660" style="fill:none;stroke:black;stroke-width:3" />
  
  <text x="140" y="140" fill="black" font-size="70" font-weight="bold">Hello</text>
  
  <polyline points="768,0 512,720"                style="fill:none;stroke:black;stroke-width:3" />
  
  <text x="1100" y="530" fill="black" font-size="70" font-weight="bold">hi</text>
  
  <polyline points="828,60 1250,60 1250,690 572,690" style="fill:none;stroke:black;stroke-width:3" />
  
  
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

Answer 4

它可能对您有用。

demo.html

<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

<title>Untitled 4</title>
</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid 
#000000;">
</canvas>

</body>
</html>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello",8,30);
ctx.fillText("hi",165,90);
ctx.beginPath();
ctx.moveTo(115,0);
ctx.lineTo(-1000,3000);
ctx.stroke();
</script>

在不使用图片的情况下创建html页面，在描述中截图

4 个答案:

斜线

外部矩形