Question

基本上，我正在尝试制作一个将通过幻灯片显示的矩形，但我希望矩形看起来像这样：

\------------------|
 \                 |
  \                |
   \               |
    \              |
     \_____________|

有任何帮助吗？谢谢！

Answer 1

<强> SVG

您可以使用SVG创建此形状使用一个＆lt; polygon＆gt; 元素

示例：

svg {
  width: 300px;
}

<svg viewBox="-5 -5 160 110">
  <polygon fill="tomato" stroke="LightSeaGreen" stroke-width="5" points="0,0 150,0 150,100 50,100" />
</svg>

如果要使用css来定义必须从内联样式中删除它们的颜色。（内联样式是恶霸，因此它们不会被推开）。

/*#SIMPLE*/

.trapzoid {
  width: 300px;
}
.pinktrapzoid {
  fill: rgb(250, 200, 200);
  stroke: Lime;
  stroke-width: 4;
}
/*ADVANCED*/

.gradienttrapzoid {
  fill: url(#redblue);
  stroke: Lime;
  stroke-width: 4;
}

<!--Simple-->
<svg class="trapzoid" viewBox="-5 -5 160 110">
  <polygon class="pinktrapzoid" points="0,0 150,0 150,100 50,100" />
</svg>

<!--Advanced-->
<p>Or if you want to go crazy</p>
<svg class="trapzoid" version="1.1" viewBox="-5 -5 160 110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="redblue" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="pink" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
  <polygon class="gradienttrapzoid" fill="url(#redblue)" points="0,0 150,0 150,100 50,100" />
</svg>

Answer 2

看看其中一些：https://css-tricks.com/examples/ShapesOfCSS/

编辑：你可以从那里组合一些形状来创造你想要的东西。

以下是一个示例：JSFiddle

#rectangle {
  width: 200px;
  height: 110px;
  background: red;
  position: absolute;
}
#triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 110px solid white;
  border-right: 110px solid transparent;
}

<div id="rectangle"></div>
<div id="triangle"></div>

Answer 3

一种方法是使用这种风格：

<input type="file" name="blog_img" size="chars" class="upload-file" />

如果您不填充元素内的内容，这可以正常工作。

如果要在矩形中写入内容，则可能必须使用function upload() { //set preferences $config['upload_path'] = './uploads/'; $config['allowed_types'] = 'txt|pdf'; $config['max_size'] = '100'; //load upload class library $this->load->library('upload', $config); if (!$this->upload->do_upload('filename')) { // case - failure $upload_error = array('error' => $this->upload->display_errors()); $this->load->view('upload_file_view', $upload_error); } else { // case - success $upload_data = $this->upload->data(); $data['success_msg'] = '<div class="alert alert-success text-center">Your file <strong>' . $upload_data['file_name'] . '</strong> was successfully uploaded!</div>'; $this->load->view('upload_file_view', $data); } }伪元素。这会添加一个虚拟元素。

伪元素只包含三角形部分，普通元素将是矩形部分。

div {
    height: 0;
    border-top: 100px solid red; /* height of the triangle */
    border-left: 100px solid transparent; /* width of the triangle */
    width: 200px; /* width of the connected rectangle */
}

这两个示例只需要一个HTML元素。这样可以保持HTML清洁：）。

CSS中的自定义形状

3 个答案: